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

이 질문이 원래 질문되고 답변 된 이후로 상황이 변경되었습니다 . @ 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 파일의 속성과 같은 조건이있을 수 있음). 글꼴 다운로드에 분명하게 적용되지 않는 몇 가지 제한 사항이 있기 때문에 라이센스를 읽는 것이 중요합니다 .