HTML에 글꼴을 포함하는 방법은 무엇입니까?

웹 페이지에 글꼴을 포함하기위한 적절한 솔루션 (특히 SEO 측)을 찾으려고합니다. 지금까지 Firefox에서도 작동하지 않는 W3C 솔루션 과이 멋진 솔루션 을 보았습니다 . 두 번째 솔루션은 타이틀 전용입니다. 전체 텍스트에 사용할 수있는 솔루션이 있습니까? 웹 페이지의 표준 글꼴에 지쳤습니다.

감사!

이 질문이 원래 질문되고 답변 된 이후로 상황이 변경되었습니다 . @ font-face 임베딩을 사용하여 본문 텍스트가 작동하도록 브라우저 간 글꼴 임베딩을 가져 오는 데 많은 작업이 수행되었습니다.

Paul Irish는 여러 다른 사람들의 시도를 결합한 Bulletproof @ font-face 구문 을 작성했습니다. 실제로 전체 기사 (상단뿐만 아니라)를 살펴보면 단일 @ font-face 문이 IE, Firefox, Safari, Opera, Chrome 및 기타 다른 항목을 포함 할 수 있습니다. 기본적으로 이것은 아무것도 깨지 않는 방식으로 OTF, EOT, SVG 및 WOFF를 공급할 수 있습니다.

그의 기사에서 발췌 :

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

그 기반에서 일하면서 Font Squirrel 은 @ font-face Generator 를 포함하여 다양한 유용한 도구를 모았습니다.이 도구 를 사용하면 TTF 또는 OTF 파일을 업로드하고 다른 유형에 대한 자동 변환 된 글꼴 파일을 미리 빌드 된 CSS 및 데모 HTML 페이지. Font Squirrel에는 수백 개의 @ font-face 키트도 있습니다.

Soma Design은 또한 FontFriend Bookmarklet 을 통합하여 페이지의 글꼴을 즉시 재정 의하여 시도해 볼 수 있습니다. FireFox 3.6+에서 드래그 앤 드롭 @ font-face 지원을 포함합니다.

최근에 Google은 오픈 소스 라이선스에 따라 사용할 수 있고 Google 서버에서 제공되는 다양한 글꼴 인 Google Web Fonts 를 제공하기 시작 했습니다.

라이선스 제한

마지막으로 WebFonts.info 는 라이센스를 기반으로 @ font-face 임베딩에 사용할 수 있는 멋진 위키 글꼴 목록을 모았습니다 . 완전한 목록이라고 주장하지는 않지만 포함 / 연결을 위해 글꼴을 사용할 수 있어야합니다 (CSS 파일의 속성과 같은 조건이있을 수 있음). 글꼴 다운로드에 분명하게 적용되지 않는 몇 가지 제한 사항이 있기 때문에 라이센스를 읽는 것이 중요합니다 .

시도 Facetype.js을 당신이 자바 스크립트 파일로 .TTF 글꼴을 변환. 전체 SEO 호환, FF, IE6 및 Safari를 지원하며 다른 브라우저에서 정상적으로 저하됩니다.

아니요, 최첨단 브라우저를 사용하는 사람들에게만 기꺼이 음식을 제공하지 않는 한 체형에 대한 적절한 솔루션은 없습니다.

마이크로 소프트는 그들 만의 독자적인 폰트 임베딩 기술인 WEFT를 가지고 있지만 몇 년 동안 이야기를 듣지 못했고 그것을 사용하는 사람도 아무도 모릅니다.

디스플레이 유형 (헤드 라인, 블로그 게시물 제목 등)에 대해 sIFR을 사용하고 신체 유형 (예 : Trebuchet MS)에 대해 덜 마모 된 웹 안전 글꼴 중 하나를 사용합니다. 모든 웹 안전 글꼴에 지루하다면 용어를 너무 좁게 정의하고있을 것 입니다. 주요 OS와 함께 제공되는 스톡 글꼴 매트릭스를 살펴보면 다음 과 같은 글꼴 캐스케이드를 찾을 수있을 것입니다. 거의 모든 웹 사용자를 잡습니다.

예를 들어 : font-family: "Lucida Grande", "Verdana", sans-serif공통 글꼴 계단식입니다. OS X에는 Lucida Grande가 함께 제공되지만 Windows 사용자에게는 Lucida Grande와 비슷한 크기와 모양의 문자로 된 웹 안전 글꼴 인 Verdana가 제공됩니다. Linux 사용자는 대부분의 배포판의 패키지 관리자에있는 웹 안전 글꼴 패키지를 설치 한 경우 Verdana를 받게됩니다. 그렇지 않으면 일반 sans-serif로 대체됩니다.

그리고 그럴 가능성도 거의 없습니다. EOT는 IE에서만 지원하는 상당히 제한적인 형식입니다. Safari 3.1과 Firefox 3.1 (현재 알파) 및 Opera 9.6은 모두 트루 타입 글꼴 (ttf) 임베딩을 지원하며 최소한 Safari는 동일한 메커니즘을 통해 SVG 글꼴을 지원합니다. 떨어져있는 목록은 이것에 대해 얼마 전에 좋은 토론을했습니다 .

상용 옵션 인 Typekit을 확인하십시오 (무료 패키지도 제공됩니다).

그것은되는 브라우저를 사용하고 (따라 다른 기술을 사용하여 @font-face대의 EOT형식), 또한 당신을 위해 모든 글꼴 라이선스 문제에주의해야합니다. IE6까지 모든 것을 지원합니다.

Typekit 작동 방식에 대한 추가 정보는 다음과 같습니다.

• http://forabeautifulweb.com/blog/about/first_impressions_of_typekit
• http://www.sitepoint.com/blogs/2009/06/01/web-fonts-get-real-with-typekit/

나는 이것을 잠시 뒤로 물었다 . 대답은 기본적으로 작동하지 않는다는 것입니다. :(