왜 폰트 페이스에 ttf, eot, woff, svg 등을 포함시켜야합니까?

299

에서 CSS3 font-face , 같은 포함 된 여러 글꼴 종류가 있습니다 ttf, eot, woff, svg및 cff.

왜이 모든 유형을 사용해야합니까?

다른 브라우저에 특수한 경우 주요 웹 브라우저 수보다 더 많은 이유는 무엇입니까?

css font-face webfonts

— 사용자 16948
소스

답변:

425

2019 년 답변 :

WOFF2 만 사용하거나 레거시 지원이 필요한 경우 WOFF를 사용하십시오. 다른 형식을 사용하지 마십시오

( svg그리고 eot죽은 형식은, ttf및 otf전체 시스템 글꼴이 있고, 웹 목적으로 사용할 수 없습니다)

2012 년의 원래 답변 :

요컨대, font-face는 매우 오래되었지만 최근에는 IE 이상에서 지원되었습니다.

eot IE9보다 오래된 Internet Explorer에는이 사양이 발명되었지만 eot는 독점 솔루션이었습니다.
ttf그리고 otf어떤 사람들은이 의미 누구나 무료로 비용이 드는 라이센스 글꼴을 다운로드 할 수 짜증있어, 그래서 정상적인 된 글꼴입니다.
SVG 1.1은 SVG 마크 업을 사용하여 순전히 글꼴을 모델링하는 방법을 설명하는 "글꼴"장을 추가하여 사람들이 사용하기 시작합니다. 더 많은 시간이 흐르고 일반 글꼴 형식과 비교할 때 절대적으로 끔찍한 것으로 나타 났 으며 SVG 2는 전체 장을 다시 현명하게 제거합니다.
그런 다음 woff도메인 지식이 많은 사람들이 발명하여 시스템 설치에 중요하지만 웹과 관련이없는 비트를 버리는 방식으로 글꼴을 호스팅 할 수 있습니다 (해적 행위에 대해 걱정하는 사람들을 행복하게 함). 웹의 요구에 더 잘 맞도록 내부 압축이 가능합니다 (사용자와 호스트를 행복하게 함). 이것이 선호되는 형식이됩니다.
2019 년 편집 몇 년 후, woff2초안 작성 및 승인을 통해 압축률이 향상되어 파일 크기가 더 작아지고 단일 글꼴을 "부분으로"로드 할 수있어 20 개의 스크립트를 지원하는 글꼴을 "청크"로 저장할 수 있습니다 대신 디스크에서 글꼴을 전체 글꼴을 전송하지 않고 필요에 따라 자동으로 글꼴을 "부분으로"로드 할 수 있으므로 조판 환경이 더욱 향상됩니다.

IE 8 이하, iOS 4 이하 및 안드로이드 4.3 이하를 지원하지 않으려면 WOFF (및 더 압축 된 WOFF 인 WOFF2를 지원하는 최신 브라우저)를 사용하면됩니다.

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

지원 woff은 http://caniuse.com/woff 에서 확인할 수 있습니다 .
지원 woff2은 http://caniuse.com/woff2 에서 확인할 수 있습니다 .

— 리치 브래드쇼
소스

iOS 5는 WOFF를 지원합니다.

— Rob

woff... 사람들이 글꼴을 불법 복제하는 것을 막는 모드가 있습니까? 지구상에서 어떻게 작동합니까?

— Mark Amery

TTF는 WOFF보다 가벼워서는 안됩니다. WOFF는 TrueType-OpenType 글꼴 (ttf 및 otf)의 압축 형식입니다.

— toto_tico

WOFF의 요점은 불법 복제 방지가 아닙니다. TypeKit 은 "OpenType / CFF 글꼴이 TrueType 글꼴에 비해 2 가지 주요 이점은 1) 파일 크기가 작고 2) 앤티 앨리어싱의 형태를 허용하는 환경에서 제대로 렌더링하기 위해 훨씬 적은 힌트 정보를 필요로한다는 것입니다. "

— Michael McGinnis

@Zelphir 도구를 사용하면 해당 플래그를 사용하여 포함 가능한 글꼴을 만들기가 어려워지며, 방치 형 디자이너가 프로그래밍을 중단하고 누군가가 반짝이는 "해적 글꼴"버튼으로 Mac 응용 프로그램을 디자인 한 경우에만 플래그를 제거 할 수 있습니다. 또한 회사 인 경우 법적 고발을 제기 할 수 있습니다. 그들이 블로그를 가진 사람이라면, 그들과 이야기하고, 실패하고, 그들의 호스트 등을 말하십시오-그러나 당신의 글꼴을 구입할 수없는 사람들은 어쨌든 잠재적 인 의상을 입는 사람이 아니라는 것을 명심하십시오. 그래서 나는 무료 홍보가 더 가치가 있다고 말할 것입니다 dafont에서 가장 가까운 것으로 바꾸도록 설득하는 번거 로움보다.

— Camilo Martin

Woff는 압축 된 압축 형식의 TrueType-OpenType 글꼴입니다. 작고 그래픽 파일처럼 네트워크를 통해 전달 될 수 있습니다. 가장 중요하게는 라틴어 스크립트 만 사용하기 때문에 거의 신경 쓰지 않는 렌더링 규칙 테이블을 포함하여 글꼴이 완전히 보존됩니다.

[죽은 URL이 제거됨]을 살펴보십시오. 표시되는 글꼴은 실험적인 웹 제공 스마트 폰트 (woff)이며 복잡한 모양을 만드는 수천 개의 결합 된 문자가 있습니다. 기본 텍스트는 로마자 화 된 Singhala의 간단한 라틴 코드입니다. (메모장에 복사하여 붙여 넣기 참조).

woff만이 글꼴을 가지고 있지 않기 때문에이 작업을 수행 할 수는 있지만 어디서나 볼 수 있습니다 (Mac을 통해 모든 브라우저에서 Mac, Win, Linux 및 스마트 폰에서도 볼 수 있습니다. IE는 Open Types를 완벽하게 지원하지 않습니다).

— 사용자 2422970
소스

해당 웹 사이트에 특별한 내용이 없습니다. 편집기로 복사하면 (utf8 지원) 여전히 일반 텍스트 만 보입니다. Woff가 정확히 무엇을합니까?

— Zelphir Kaltstahl

이 답변의 3 분의 2는 잘못되었거나 관련이 없습니다. 또한 그 링크가 끊어졌습니다.

— Yay295

Brotli 압축 알고리즘 및 파일 크기를 30 % 이상 줄인 WOFF 1.0에 대한 기타 개선 사항을 기반으로하는 WOFF 2.0은 Chrome, Opera 및 Firefox에서 지원됩니다.

http://en.wikipedia.org/wiki/Web_Open_Font_Format http://en.wikipedia.org/wiki/Brotli

http://sth.name/2014/09/03/Speed-up-webfonts/ 에는 사용 방법에 대한 예가 있습니다.

기본적으로 src url을 woff2 파일에 추가하고 woff2 형식을 지정하십시오. woff 형식 이전에 이것을 사용해야합니다. 브라우저는 지원하는 첫 번째 형식을 사용합니다.

— 지르 키 알라 쿠야 얄라
소스