웹 글꼴 사용 방법

Sep 17, 2025

어떻게

다음은 Bram Stein의 WebFont Handbook에서 가져온 발췌문입니다. 여기 그것을 구입하십시오 ...에

웹 글꼴 CSS에서 정의됩니다 @ font-face. 규칙. 당신이 웹 개발자 인 경우 가장 쓸 가능성이 높거나, 복사하고 붙여 넣거나, 최소한 @ font-face. 규칙.

그러나 완전성을 위해서는 기본 예제를 통해 빠르게 실행합시다.

 @ font-face {
  글꼴 - 가족 : 엘레나;
  src : URL (Elena-Regular.woff);
}

이렇게하면 새 웹 글꼴 패밀리가 생성됩니다. 글꼴 - 가족 또는 폰트 속기 속성. 그러나 뭔가가 여기에 없습니다. 글꼴 스택에서 웹 글꼴을 참조 할 때 웹 글꼴이로드되지 않으면 항상 적어도 하나의 대체 글꼴을 포함해야합니다.

여기서 엘레나가로드되지 않으면 브라우저가 일반에 다시 떨어집니다. 가는 장식 선 글꼴 가족 :

 p {
  글꼴 - 가족 : 엘레나, 세리프;
}

폴백 글꼴에는 더 많은 것이 있습니다. 그러나 지금은 일반적인 것만으로 글꼴 스택을 간단하게 유지합시다. 가는 장식 선 과 산세 리프 글꼴 가족.

글꼴 가족

여러 스타일을 가진 글꼴 패밀리를 만드는 것은 @ font-face. 각 스타일에 대한 규칙을 지정하고 동일한 것을 사용합니다 글꼴 - 가족 이름. 다음과 같은 @ font-face. 규칙은 정상 및 대담한 스타일로 가족을 만듭니다.

 @ font-face {
     글꼴 - 가족 : 엘레나;
     src : URL (Elena-Regular.woff);
     글꼴 무게 : 정상;
}
   @ font-face {
     글꼴 - 가족 : 엘레나;
     src : URL (elena-bold.woff);
     글꼴 무게 : 굵게;
}

선택기의 패밀리 이름과 무게를 참조하여 CSS 에서이 글꼴 제품군을 사용할 수 있습니다. 이는 일반적인 스타일을 단락에 적용하고 대담한 스타일을 강한 단락 :

 p {
  글꼴 - 가족 : 엘레나, 세리프;
}

P 강한 {
  글꼴 무게 : 굵게;
}

게다가 폰트 무게 , @ font-face. 또한을 받아들입니다 글꼴 스타일 과 폰트 스트레치 기울임 꼴 및 응축과 같은 스타일을 정의하는 속성 디스크립터. 세 가지 속성 디스크립터는 모두 여러 스타일의 단일 글꼴 패밀리를 만드는 데 사용할 수 있습니다. 이론적으로 이것은 243 개별 스타일을 포함하는 가족을 만들 수 있습니다 (9 폰트 무게 값 × 3 글꼴 스타일 값 × 9. 폰트 스트레치 값).

그러나 실제로 일부 브라우저가 지원하지 않기 때문에 실제로 27 개의 값으로 제한됩니다. 폰트 스트레치 ...에 아래 표를 살펴 보려면 어떤 브라우저를 볼 수 있는지 확인하십시오. 여기 자세한 정보는

Click the icon in the top right to enlarge the image — 오른쪽 상단의 아이콘을 클릭하여 이미지를 확대하십시오.

행운을 가짐으로써 나머지 브라우저는 그를 구현합니다 폰트 스트레치 재산은 곧 243 개의 글꼴 분류를 모두 사용할 수 있습니다.

글꼴 형식

그만큼 src. Descriptor는 글꼴 파일을 얻을 수있는 브라우저에게 알려줍니다. 이전의 예제는 단일 글꼴 형식을 사용했지만 형식 힌트와 결합 된 여러 글꼴 형식으로 URL을 볼 수 있으며, 이는 URL 이후에 추가됩니다. 형식 ( "값") 통사론.

형식 힌트는 브라우저에게 주어진 URL의 글꼴 파일 형식이 무엇인지 알려줍니다.

 @ font-face {
  글꼴 - 가족 : 엘레나;
  src : URL (elenge-legion.woff2) 형식 ( "WOFF2"),
       URL (Elena-Regular.woff) 형식 ( "WOFF");
}

여러 형식을 나열하는 경우 최신 브라우저는 형식 힌트를 기반으로 지원하는 첫 번째 형식을 선택합니다. 따라서 최상의 압축 순서대로 웹 글꼴 형식을 나열하는 것이 중요합니다.

형식 힌트가 선택 사항이지만 항상 포함합니다. 브라우저가 글꼴을 다운로드 할 필요없이 형식을 알려줍니다. 예를 들어 브라우저가 WOFF2를 지원하지 않지만 WOFF를 지원하지 않으면 힌트 형식을 기반으로 WOFF2 글꼴 파일을 건너 뛸 수 있습니다.

브라우저는 여러 웹 글꼴 형식을 지원합니다. OpenType (trueType), EOT, WOF 및 WOFF2. 일부 브라우저는 SVG 글꼴을 지원하지만 더 이상 사용되지 않아야하며 더 이상 사용하지 않아야합니다 (그리고 새로운 OpenType-SVG 형식 짐마자

Eot, WOFF 및 WOFF2는 기술적으로 글꼴 형식이 아닙니다. 이들은 압축 정도가 다양한 압축 된 OpenType 파일입니다. WOFF2는 최상의 압축을 제공하며 WOFF 및 EOT가 뒤 따릅니다.

모든 브라우저에 대한 적용 범위를 연구 할 때, 당신은 방탄 @ font-face. 통사론 fontspring에 의해.

Bulletproof 구문은 최대 브라우저 범위를 위해 Eot, WOFF2, WOFF, RAW OpenType 및 SVG 글꼴 파일을 사용합니다.

 @ font-face {
  글꼴 - 가족 : 엘레나;
  src : url (elena.eot? #iefix) 형식 ( "embedded-opentype"),
       URL (elena.woff2) 형식 ( "WOFF2"),
       URL (elena.woff) 형식 ( "WOFF"),
       URL (elena.otf) 형식 ( "OpenType"),
       URL (elena.svg # 엘레나) 형식 ( "svg");
}

첫 번째 URL 줄은 당신에게 조금 이상하게 보일 수 있습니다. Internet Explorer 8 및 아래 버전은 여러 글꼴 형식의 구문을 지원하지 않으며 전체 가치를 취급합니다. src. 속성은 URL입니다.

Bulletproof 구문은 Internet Explorer 8 및 아래의 나머지 URL이 첫 번째 URL의 단편 식별자의 일부임을 생각하기로합니다. Fragment Identifier는 파일을 다운로드 할 때 무시되므로 Internet Explorer 8 및 아래는 첫 번째 URL을 사용하기 만하면됩니다.

Internet Explorer 이외의 브라우저는 EOT를 지원하지 않기 때문에 줄을 건너 뜁니다.

나머지 항목은 기대할 것입니다. 환경 설정 순서대로 나열된 글꼴 형식입니다.

그러나 방탄 구문은 여전히 관련이 있습니까? 실제로, 나는 그것이 해롭다고 생각합니다. SVG 글꼴은 더 이상 사용되지 않는 브라우저에서만 사용되지 않습니다.

대부분의 웹 사이트는 Internet Explorer 9 이상을 지원하지만 Syntax는 첫 번째 기본 글꼴 형식으로 EOT를 나열합니다. Internet Explorer 9 이상 지원 WOFF를 통해 해당 버전은 여전히 Eot 파일을 다운로드 할 예정이므로 먼저 나열되기 때문입니다.

대부분의 웹 사이트는 이전 브라우저를 더 이상 지원하지 않기 때문에 단순화 된 구문을 사용하는 것이 좋습니다. 이 단순화 된 구문은 Android 4.4 및 이전 버전과 같은 활성 사용중인 모든 현대 브라우저뿐만 아니라 모든 현대 브라우저를 다룹니다.

 @ font-face {
  글꼴 - 가족 : 엘레나;
  src : URL (elena.woff2) 형식 ( "WOFF2"),
       URL (elena.woff) 형식 ( "WOFF"),
       URL (elena.otf) 형식 ( "OpenType");
}

오래된 Android 버전이 아직 사용 되더라도 이러한 브라우저에 대한 전 세계적 의존도는 빠르게 Dwindling입니다. 곧 당신은 아마 원시 OpenType 형식을 삭제하고 구문을 더 단순화 할 수 있습니다.

 @ font-face {
  글꼴 - 가족 : 엘레나;
  src : URL (elena.woff2) 형식 ( "WOFF2"),
       URL (elena.woff) 형식 ( "WOFF");
}

이 경우 이전 브라우저를 실행하는 사람은 웹 글꼴 대신 대체 글꼴을 만드는 것입니다. 괜찮아; 폴백 글꼴에서 콘텐츠를 계속 읽을 수 있습니다.

그대로 가능한 또 다른 가치가 있습니다 src. 설명자. 그만큼 현지 기능은 로컬 글꼴 가족의 이름을 취합니다. 글꼴이 시스템에 설치되면 브라우저가 대신 사용하여 추가 다운로드를 피할 수 있습니다.

 @ font-face {
  글꼴 - 가족 : 엘레나;
  src : 로컬 ( "엘레나"),
       URL (Elena-Regular.woff2) 형식 ( "WOFF2"),
       URL (Elena-Regular.woff) 형식 ( "WOFF");
}

이것이 훌륭한 최적화처럼 보일 수 있지만 로컬 글꼴이 웹 글꼴과 일치하는지 보장하는 것은 없습니다.

다른 언어 지원 또는 완전히 다른 글꼴의 글꼴, 글꼴의 다른 버전을 얻을 수 있습니다. 그 이유 때문에 나는 보통 현지 이 다운 사이즈를 수용 할 수있는 것을 발견하지 않는 한 기능.

이것은 Bram Stein 's에서 발췌 한 것입니다 WebFont Handbook. , 책에서 떨어져서. 그 안에 그는 웹 글꼴을 선택할 때 고려해야할지, 효과적으로 사용하는 방법과 성능을 최적화하는 방법을 탐구합니다.

관련 기사:

도대체 블록 체인은 무엇입니까?
웹 디자이너와 DEVS에 대한 30 개의 크롬 확장
20 놀라운 무료 Google 웹 글꼴

웹 글꼴 사용 방법

글꼴 가족

글꼴 형식

어떻게 - 가장 인기있는 기사

Windows, MacOS 및 Android 용 웹 알림을 끄는 방법

까다로운 디자인을 해결하는 방법

디지털 펠린 공기 그림을 만드는 방법

트위터 바이오에서 글꼴을 변경하는 방법

Zbrush의 현실적인 해부학

정통 만화 만화 스트립을 만드는 방법

오일에서 초상화를 칠하십시오

손으로 그린 그림 기술을 개선하기위한 최고 팁

카테고리