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

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

---

웹 페이지에 글꼴을 포함하기위한 적절한 솔루션 (특히 SEO 측)을 찾으려고합니다. 지금까지 파이어 폭스에서도 작동하지 않는 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/

---

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

참고 URL : https://stackoverflow.com/questions/220236/how-to-embed-fonts-in-html