글꼴 페이스 src에 가능한 형식 값

Question

무엇을 사용해야 하는지, 언제 사용해야 하는지, 실제로 필요한지 여부를 어떻게 알 수 있나요?

많은 사이트에 이와 같은 예가 있지만 순서는 다릅니다.

@font-face {
  글꼴 계열: '예제';
  src: url('Example.eot');
  src: url('Example.eot?#iefix') 형식('embedded-opentype'),
       url('Example.woff2') 형식('woff2'),
       url('Example.woff') 형식('woff'),
       url('예제.ttf') 형식('트루타입'),
       url('Example.svg#svgExample') 형식('svg');
}

하지만 다음과 같은 예도 보았습니다.

@font-face {
  글꼴 계열: '예제';
  src: url('Example.woff2') 형식('woff');
}
@글꼴-얼굴 {
  글꼴 계열: '예제';
  src: url('Example.ttf') format('woff2-variations');
}
@글꼴-얼굴 {
  글꼴 계열: '예제';
  src: url('Example.otf');
}

때때로 형식이 파일 끝과 동일해 보이고, 때로는 파일 끝이 축약되거나 적어도 부분적으로 동일해 보이고, 다른 경우에는 완전히 임의의 문자열로 나타나거나 때로는 파일일 경우 전혀 아무것도 아닌 것처럼 보입니다. .

Answer 1

가능한 모든 형식 값을 아는 것이 중요하지 않습니다. ​​ - 그 중 많은 값이 실험적인 브라우저 구현에서 비롯되었기 때문입니다.

실제로 일부 서식 값을 CSS 브라우저 접두사와 비교할 수 있습니다. 다행스럽게도 관련성이 떨어졌지만 불행히도 여전히 관련성이 있는 경우가 있습니다.

첫 번째

예를 참조하세요. @font-face 으아악

.otf 형식('오픈타입')

실제로 분실되었습니다. 하지만 네트워크 사용량과는 아무런 관련이 없습니다. .otf 으아악

트루타입과 유사하며 로컬에 설치하여 모든 데스크톱 응용 프로그램에서 사용할 수 있습니다.

글꼴 캐스팅 용어: OTF 글꼴 파일은 "포스트 스크립트 풍미" 개방형 글꼴이라고도 합니다.

.ttf/truetype 글꼴은 "Truetype 맛이 나는" 오픈타입 글꼴이라고도 합니다.

글꼴에는 woff2에 비해 고급 파일 압축 기능이 부족합니다. .otf

.eot 형식('embedded-opentype')

Internet Explorer에서만 사용됩니다. 그러나 이러한 잔혹행위도 최소한 ttf/truetype을 렌더링할 수 있습니다.

구식.eot (특별한 Windows 임베디드 시스템에서 실행되는 일부 임베디드 시스템을 유지 관리할 필요가 없는 경우)

.svg 형식('svg')

웹킷 브라우저(Safari, Epiphany, Midori) 및 Android 브라우저에서만 지원됩니다.

그러나 위의 모든 브라우저는 woff2, woff 또는 truetype도 지원합니다.
가장 중요한 점은 Chromium/Blink 기반 브라우저(opera, Vivaldi, Brave, Internet Explorer 13/Edge) 또는 Firefox에서는 지원되지 않는다는 것입니다.

아니요

글꼴 파일이 필요합니다(icomoon과 같은 아이콘 생성기의 교환 형식으로 편리하게 사용할 수 있음) .svg

.ttf 형식('트루타입')

아마도 가장 잘 지원되는 글꼴 형식일 것입니다. 하지만 woff2나 woff만큼 컴팩트하지는 않습니다.

또한 트루타입 글꼴은 데스크탑 환경에서 사용할 수 있으므로 모든 응용 프로그램에서 로컬로 설치하고 사용할 수 있습니다.

일부 사용 사례(예: PDF 변환)에는 여전히 관련이 있습니다.

가변 글꼴

이 게시물에 있는 것과 같은 오래된 기호를 발견할 수도 있습니다.

CSS 팁 으아악

이러한 추가 형식 유형은 가변 글꼴 지원이 아직 실험적이었던 시절부터 시작되었습니다.

오늘날에는 더 이상 필요하지 않습니다. 일반 형식 식별자만 사용하면 됩니다.

당신도 이 형식을 포기할 수도 있습니다

대부분의 최신 브라우저는 지정된 형식이 없어도 글꼴 파일을 글꼴 모음에 매핑할 수 있습니다.

그래도 포함하는 것이 좋습니다.

그러나 잘못된 형식 값은 @font-face 규칙을 위반할 수 있습니다!

일반적인 실수:

으아악

대신

으아악

...무게와 스타일 속성을 잊지 마세요

으아악

가변 글꼴 @font-face

이 경우 글꼴 가중치 및 기타 속성에는 범위를 정의하는 2개의 값이 포함됩니다(예:

). font-weight: 100 1000 으아악