왜 많은 글꼴 형식을로드합니까?

전형적인 @ 글꼴 얼굴 설정 :왜 많은 글꼴 형식을로드합니까?

@font-face { 
    font-family: 'myFont'; 
    src: url('/fonts/myFont.woff') format('woff'), 
    url('/fonts/myFont.ttf') format('ttf'), 
    url('/fonts/myFont.svg') format('svg'), 
    url('/fonts/myFont.eot') format('eot') 
}

지금, 우리는 "최신 브라우저"로 번역 IE 9 이상이 정의를 가지고있다. font type support에서 보면 eot가 IE8 인 것처럼 보이지만 큰 혼란이 있습니다. "근사 할 수 있습니까?"사이트를 보면 현재의 모든 브라우저에서 woff 및 svg 형식을 모두 지원합니다.

왜 우리는이 세 가지 형식을 모두 추가합니까? 모든 최신 브라우저가 woff 또는 svg를 지원하기 때문에 필요합니다. 내가 이해하지 못하는 것은 질서가 중요하다는 것이다. 따라서 위의 예제에서 모든 최신 브라우저는 "woff"형식을 다운로드합니다. svg를 추가 할 필요가 없습니다. 그런데 왜 우리가 그렇게합니까?

이 질문의 배경은 인라인 최적화입니다. 내 글꼴을 Base64 문자열로 포함시키려는 경우 세 가지 글꼴 형식을 모두 인라인하는 것이 "최적"가 아니라 CSS가 불필요하게 커집니다.

대상이 "최신 브라우저"인 경우 글꼴이 지원하는 형식을 선택하면됩니다. 웹상의 "모든 예"가 사용하는 이러한 대체에 대해 잊어 버리십시오.

일부 브라우저에서는 다른 브라우저보다 일부 형식이 더 좋을 수도 있지만 브라우저가 지원하는 첫 번째 형식 만 다운로드하기 때문에 문제가되지 않습니다. "현대 브라우저"는 항상 글꼴 목록의 첫 번째 오류 또는 svg가됩니다. , 또는 ttf IE에 대해 신경 쓰지 않는다면.

그래서 전 여기서 많은 가정을했습니다. 거기에 모두 추가 할 이유가 있습니까? 대부분 woff 또는 svg를 사용하여 빠져 나옵니까?

출처

2014-12-13 christianalfoni

SVG 글꼴을 지원하는 최신 브라우저가 없습니다. –

감사합니다. 업데이트 된 문제입니다. 지원하지 않는 FireFox 일뿐입니다. 적어도 내가 사용하는 소스에 의해 명시된. – christianalfoni

소스가 오래되어 잘못되었습니다. http://blog.chromium.org/2014/08/chrome-38-beta-new-primitives-for-next.html –

거의 모든 질문에 스스로 대답했습니다. :)

여기에 도움이 될 좋은 읽기입니다 :

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=en

다시 SVG 글꼴, 난 단지 SVG의 웹 글꼴을 지원하는 이전 버전의 iOS 사파리 생각합니다. 그것이 조리법에서 인기가있는 이유입니다. EOT는 오래된 IE였습니다. TTF는 pre-woff non-IE입니다. 요즘에는 크롬, 오페라 및 비 릴리스 Firefox에서 지원되는 woff2도 있습니다.

글꼴 데이터를 인라이닝하려면 브라우저를 검색하고 지원되는 최상의 버전을 보내야합니다.

출처

2014-12-16 08:09:41 behdad

안녕하세요, 댓글과 링크를 보내 주셔서 감사합니다! 이것은 나를 진정시켰다 ;-) – christianalfoni

왜 많은 글꼴 형식을로드합니까?

답변

관련 문제