두 가지 방법 모두 올바른 출력을 제공하지만보다 정확한 방법은 단일 글꼴 모음을 사용하여 다양한 가중치 및 스타일의 모든 변형을 그룹화하는 것입니다. 시스템 글꼴 ( 'Arial'에서 'sans-serif'까지)을 사용하는 것과 같은 방식이며, 실제로 Google 글꼴을 사용하여 Raleway를로드하는 경우 단일 글꼴 패밀리 경로를 사용하게됩니다.
이것이 올바른 방법 인 몇 가지 이유를 설명해 봅시다.
CSS 복잡성을 줄이고 궁극적으로 파일 크기를 줄입니다.
글꼴 모음이 하나만 있으면 글꼴 모음으로 전체 포함 요소를 정의 할 수 있으며 가중치 / 스타일이 다른 특정 요소 만 정의 할 수 있습니다. 예를 들어 다음을 수행하십시오.
html {
font-family: Raleway;
}
.bold {
font-weight: 700;
}
.italic {
font-style: italic;
}
.footer {
font-family: Arial;
}
<p>I'm raleway font, <span class="bold">and I'm raleway bold</span></p>
<div class="bold italic">I'm Raleway Bold Italic!</div>
<div class= footer>I'm <span class="bold">Arial Bold,</span> w/ the same class!</div>
이 CSS가 얼마나 좋고 간결한 지 주목하십시오. "RalewayBold"를 .bold의 글꼴 모음으로 지정하거나 .italic의 "RalewayItalic"으로 지정할 필요가 없습니다. 실제로 클래스가 작동하기 때문에 대담하고 기울임 꼴 변형을 지정할 필요조차 없습니다. 또한 .bold가 .footer 내부에 있으면 바닥 글 컨테이너에서 Arial을 상속하기 때문에 Raleway가 아닌 대담한 Arial이됩니다.
브라우저가하는 방식입니다.
위의 내용은 기본적으로 브라우저 내부 스타일 시트가 최소 스타일과 CSS의 고유 한 캐스케이드 특성을 사용하여 글꼴을 정의하는 방법입니다.
그것은 업계가하고 행한 방식입니다.
가장 큰 웹 속성, 응용 프로그램 및 게시자는 모두이 방법을 사용합니다. Google, Facebook, NYT, ESPN 등은 모두 이러한 방식으로 글꼴을 정의하고 사용합니다.
CSS뿐만 아니라 인터넷 이전의 사용자 인터페이스는 단일 글꼴 패밀리를 지정하고 다양한 무게 및 스타일 사양에 따라 변형을 선택합니다. Microsoft Word, KeyNote, Google Docs, 심지어 1990 년대 말 WordPerfect를로드하고 글꼴 드롭 다운을 엽니 다. 글꼴 모음 이름 "Arial"이 표시됩니다. "Arial"과 "Arial Bold", "Arial Italic"등이 아닙니다.
Google Fonts에서로드하십시오.
Google Fonts의 무료 웹 폰트 저장소에서 Raleway를로드하면 Raleway가 단일 패밀리 이름으로 정의되어 있습니다.
https://fonts.googleapis.com/css?family=Raleway:400,400italic,500,500italic,700,700italic
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: url(https://...Raleway-Regular.woff2) format('woff2');
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://...Raleway-Bold.woff2) format('woff2');
}
@font-face {
font-family: 'Raleway';
font-style: italic;
font-weight: 500;
src: url(https://...Raleway-MediumItalic.woff2) format('woff2');
}
@font-face {
font-family: 'italic';
font-style: normal;
font-weight: 700;
src: url(https://...Raleway-BoldItalic.woff2) format('woff2');
}
