WOFF 및 EOT 만있는 경우 @ font-face로 어떤 브라우저를 지원합니까?


16

웹에서 제공된 형식 (WOFF 및 EOT)으로 만 사용할 수있는 글꼴을 구매하려고합니다.

해당 브라우저가 어떤 브라우저에서 작동하는지 잘 모르며 최신 정보를 찾지 못하는 것 같습니다. 이 두 가지로 어떤 브라우저를 지원할 수 있습니까?

내 유일한 경험은 EOT, WOFF, TTF 및 SVG가있는 fontspring의 구문입니다.


답변:


23

이것은 @ font-face , 해키 수정 및 모두 를로드 하는 표준 방법입니다 !

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('BebasNeue-webfont.eot');
    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('BebasNeue-webfont.woff') format('woff'),
         url('BebasNeue-webfont.ttf') format('truetype'),
         url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

그러나 SVG를 제거하면 iOS <5.0에 대한 지원이 거의 완전히 손실 됩니다.

사용할 수 있는 브라우저 지원을 위한 훌륭한 테이블이 있을 수 있습니까? 다른 하나는 EOT , 다른 하나는 WOFF , 또 다른 하나는 SVG , 또 하나는 TTF 입니다. 명확성을 위해 아래에 삽입했으며 테스트 할 내용을 안내해야하지만 이것은 매우 빠르게 변할 것임을 명심하십시오.

wyu로 편집 : 지원을 나란히 볼 수 있도록 테이블을 컴파일했습니다.

@ font-face 브라우저 지원

@ font-face 브라우저 지원

EOT 브라우저 지원

EOT 브라우저 지원

WOFF 브라우저 지원

WOFF 브라우저 지원

SVG 브라우저 지원

SVG 브라우저 지원

TTF 브라우저 지원

TTF 브라우저 지원


3
eot는 왜 .eot와 .eot? #iefix의 두 가지 방식으로 선언됩니까?
sam


2
미래 에이 답변을 확인하는 사람이라면 ... Android> = 4.4는 이제 WOFF caniuse.com/#feat=woff를
ozke

3
친애하는 @ozke, 나는 미래에서 왔으며,이 유용한 사실을 공유해 주셔서 감사합니다. 또한 2015 년 말까지 지원하지 않는 Android 증권 브라우저 버전의 사용 woff이 전 세계 사용자의 2 % 미만으로 떨어질 것이며, 증권 Android 브라우저는 Chrome에서 Android (16 %) 및 UC (8 %) 모두 지원 woff합니다. 안드로이드 용 파이어 폭스; 그러나 사용량은 1 %를 초과하지 않습니다. 2014 년 10 월에 관습이었던 Meghan Trainor의 "저음에 관한 모든 것"을 다시들을 수 있습니다.
user56reinstatemonica8

이제 웹 글꼴 만 필요하십니까?
SuperUberDuper

1

SVG는 @ font-face를 사용하여 어느 곳으로도 갈 수 없습니다. 그러나 EOT는 IE에서 지원됩니다. 여기서 TTF 및 OTF는 다른 모든 주요 브라우저에서 지원됩니다. WOFF의 경우 TTF 및 OTF와 유사하게 일부 읽기를 수행하면 TTF 또는 OTF와 동일한 브라우저에서 지원 될 가능성이 큽니다. 내 제안, 당신이 정말로 관심이 있다면, 브라우저에서 각 @ font-face 확장자를 사용 해보고 무엇을 얻었는지 확인한 다음 @ font-face descriptor에 대한 표준 페이지를 업데이트하기 위해 W3C에 얻은 것을 제출하십시오. (현재 "안전한"글꼴 확장자도 포함되어 있지 않습니다).

다른 모든 방법이 실패하면 W3Schools가 최신 버전 인 것입니다. http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp


문제는 Safari Mobile 4.1 이하가 SVG 만 지원한다는 것입니다.
toomanyairmiles

@toomanyairmiles 이것이 결국 "기본"에 적합하게 보이게하고 "볼 수있는"사람들에게는 놀라워 보이게하는 이유입니다. 대부분의 글꼴에는 자체 OTF, EOT 및 SVG가 없으므로 100 % 적용 범위를 가질 수 없습니다.
Jeff Langemeier

실제로 할 수 있습니다. 나는 네 가지 유형 모두에서 제공되는 글꼴을 구입하거나 무료 글꼴을 사용하고 파일을 직접 생성하여 100 % 적용 범위를 갖는 여러 사이트를 구축했습니다.
toomanyairmiles

@toomanyairmiles 이것은 빠르고 느슨한 타이핑이 나를 죽이는 곳입니다. 필요한 경우 항상 100 % 적용 범위를 가질 수는 없지만 때로는 발생하지 않으며 디자이너는 최악의 시나리오에서 사람들이 오래된 브라우저 등을 사용하고 있다는 것을 기억해야합니다. % 범위가 항상 100 % 범위를 의미하는 것은 아닙니다. 인터넷 사용자의 약 40-50 %가 여전히 IE 7 이상을 사용하고 있는데, 처음에는 글꼴을 잘 지원하지 않는 진정한 100 % 적용 범위를 갖기 위해서는 결론이 필요합니다. "괜찮은"것처럼 보이거나 최소한 "더 멋진"글꼴의 제약 조건 내에서 사이트를 유지합니다.
Jeff Langemeier 2014 년

글쎄, 나는 작은 사이트와 주요 브랜드의 사이트에서 그것을 시도했다. IE6 및 7에서 글꼴이 작동합니다. 최신 브라우저만큼 렌더링 품질이 좋습니까? 아니요, 그러나 잘 작동합니다.
toomanyairmiles

1

웹 폰트 공급 업체는 실제로 해당 글꼴에 대한 eot 지원을 제공해야합니다. 특히이 때문에! 클라우드 기반 (포함 또는 제외 옵션 포함)의 경우에도 이것이 제 2의 성격이라고 생각할 것입니다. 사람들이 블랙리스트에 추가 된 글꼴을 찾아 내야하는 경우 글꼴이 발견되면 불법 복제를 조장하지 않습니까? eb


1
왜요? 이 질문을 처음 받았을 때 EOT는 죽었고, 당신이 대답했을 때 썩은 시체였으며, 오늘 나는 1 년 이상 EOT 글꼴을 보지 못했습니다.
SilverbackNet
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.