머티리얼 디자인 스케일링 글꼴

웹 사이트에서 Google의 새Material Design을 사용하고 있습니다. 그들이 제공하는 typography 규칙에 관한 몇 가지 질문이 있습니다.머티리얼 디자인 스케일링 글꼴

typography-link에 제공된 값을 시뮬레이션하려면 주어진 값을 쉽게 사용할 수 있도록 CSS 파일을 만들었습니다. 난 아직도 데

.display4{ 
    font-size: 112px; 
    font-weight: 300; 
    opacity: 0.54; 
    white-space: nowrap; 
    letter-spacing: -0.089em; 
} 
.display3{ 
    font-size: 56px; 
    font-weight: 400; 
    opacity: 0.54; 
    white-space: nowrap; 
    letter-spacing: -0.089em; 
} 
.display2{ 
    font-size: 45px; 
    font-weight: 400; 
    opacity: 0.54; 
    line-height: 1.06em; 
    letter-spacing: 0em; 
} 
.display1{ 
    font-size: 34px; 
    font-weight: 400; 
    opacity: 0.54; 
    line-height: 1.176em; 
    letter-spacing: 0em; 
} 
h1{ 
    font-size: 24px; 
    font-weight: 400; 
    opacity: 0.87; 
    line-height: 1.333em; 
    letter-spacing: 0em; 
} 
h2{ 
    font-size: 20px; 
    font-weight: 500; 
    opacity: 0.87; 
    white-space: nowrap; 
    letter-spacing: 0em; 
} 
h3{ 
    font-size: 16px; 
    font-weight: 400; 
    opacity: 0.87; 
    line-height: 1.75em; 
    letter-spacing: 0em; 
} 
core-drawer-panel:not([narrow]) h3{ 
    font-size: 15px; 
} 
.body2{ 
    font-size: 14px; 
    font-weight: 500; 
    opacity: 0.87; 
    line-height: 1.714em; 
    letter-spacing: 0em; 
} 
.body2:not([narrow]){ 
    font-size: 13px; 
} 
p{ 
    font-size: 14px; 
    font-weight: 400; 
    opacity: 0.87; 
    line-height: 1.174em; 
    letter-spacing: 0em; 
} 
core-drawer-panel:not([narrow]) p{ 
    font-size: 13px; 
} 
h4{ 
    font-size: 12px; 
    font-weight: 400; 
    opacity: 0.54; 
    white-space: nowrap; 
    letter-spacing: 0em; 
} 
.menu{ 
    font-size: 14px; 
    font-weight: 500; 
    opacity: 0.87; 
    white-space: nowrap; 
    letter-spacing: 0em; 
} 
core-drawer-panel:not([narrow]) .menu{ 
    font-size: 13px; 
} 
.button{ 
    font-size: 14px; 
    font-weight: 500; 
    opacity: 0.87; 
    white-space: nowrap; 
    letter-spacing: 0em; 
    text-transform: uppercase; 
}

한 가지 문제는 (가장 아래 부분 추적 및 커닝에서 제공) letter-spacing의 크기의 계산으로,하지만 난이 뜻을 추측 :이 CSS 파일과 같이 보인다 프로젝트의 다음 단계에서 명확히해야한다.

발생하는 질문은 다음과 같습니다. - 그들이 제공 한 값은 쉽게 조정할 수 있도록 Scalable Pixels입니다. 불행하게도 나는 이것을 어떻게하는지 정말로 모른다. 현재 나는 px에 sp의 1-1 번역을했습니다. 나는 이미 을 모두 다른 값으로 변환했다. (나는 font-size에 비례한다고 믿는다.)

전체 웹 사이트의 글꼴 크기를 늘리거나 줄이려면 웹 사이트에 두 개의 단추가 있어야합니다. 필자는 여러 폰트 크기를 지원하는 웹 사이트를 확인했지만 스타일 시트를 별도로 가지고 있기 때문에 우회하려고합니다.

내 질문 : 어떻게 쉽게 확장 할 수 내 CSS 파일을 설정해야하며 어떻게 JavaScript/CSS로 확장해야합니까?

출처

2014-07-24 jdepypere

rem 단위를 글꼴 크기로 사용하면 루트 요소의 글꼴 크기 (주로 <html> 요소)에 비해 쉽게 확장 할 수 있습니다. 당신이 다음 할 일은, 자바 스크립트를 통해 루트 요소의 글꼴 크기를 증가

html { 
    font-size: 16px; 
} 

h1 { 
    font-size: 1.5rem; 
    font-size: 24px; 
}

: 당신이 IE8 지원을 원한다면과 같이 폴백 (fallback)로

는 픽셀 값을 제공합니다.

출처

2014-10-01 09:39:33 efoken

머티리얼 디자인 스케일링 글꼴

답변

관련 문제