아주 작은 숫자의 선택자로 일반적인 타이포그래피 스타일 시트를 만들고 싶습니다. 따라서 여러 파일 버전을 만들지 않고 각각 몇 줄의 내용 만 사용하여 여러 버전에 대해 @media 섹션을 사용하는 편이 더 좋습니다.@ font-face와 @media 선언을 어떻게 결합합니까?
일부 @font-face 선언을 추가하고 싶지만 모바일 사용자가 제한된 대역폭으로 글꼴을 다운로드하도록 강요하지 않는 것이 좋습니다.
@media 블록 내에 @font-face 선언을 넣을 수 있습니까? 아니면 둘 다 최상위 수준이어야합니까? 후자의 경우, 모바일 브라우저에서 폰트 다운로드를 번거롭게 할 필요가 없다고 어떻게 말할 수 있습니까?
CSS2 spec은 이와 비슷한 것을 제안합니다.
는 fancyfonts.css로, 별도의 CSS 파일 등을 귀하의 @font-face 선언을 넣습니다.
주 CSS 파일에서로드 fancyfonts.css하지만, 미디어 대상 선언 :
@import url("fancyfonts.css") screen;
는 font-family 속성에 멋진 글꼴을 지정합니다. 이 예에서, serif을 - fancyfonts.css 사용자가 지정한 다른 글꼴로 다시 떨어질 것이다로드되지 않습니다
body {
font-family: 'My Fancy Font', serif;
}
미디어.
@ font-face 선언을 @media 블록에 넣을 수 있습니까? 아니면 둘 다 최상위 수준이어야합니까?
이것은 현재 CSS3 Fonts 모듈의 현재 작업 초안에서 명시되지 않은 것처럼 보입니다. 그러나 CSS Validator은 font-face-inside-media를 거부하므로 잘 피할 수 있습니다.