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

https://stackoverflow.com/questions/220236

03-07-2019
|

문제

웹 페이지에 글꼴을 포함시키기위한 괜찮은 솔루션 (특히 SEO 측에서)을 알아 내려고 노력하고 있습니다. 지금까지 나는 본 것입니다 W3C 솔루션, Firefox에서도 작동하지 않습니다 이 멋진 솔루션. 두 번째 솔루션은 제목에만 해당됩니다. 전체 텍스트에 사용할 수있는 솔루션이 있습니까? 웹 페이지의 표준 글꼴에 지쳤습니다.

감사!

해결책

여러가지가 바뀌었다 이 질문은 원래 묻고 대답했기 때문에. @font-face imentding을 사용하여 바디 텍스트를 위해 크로스 브라우저 글꼴 임베딩을 얻는 데 많은 작업이 수행되었습니다.

폴 아일랜드는 함께 모였습니다 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");
}

그 기지에서 일하고 글꼴 다람쥐 The를 포함한 다양한 유용한 도구를 구성하십시오 @font-face 생성기 이를 통해 TTF 또는 OTF 파일을 업로드하고 사전 구축 된 CSS 및 데모 HTML 페이지와 함께 다른 유형에 대한 자동 전환 글꼴 파일을 가져올 수 있습니다. 글꼴 다람쥐도 가지고 있습니다 수백 개의 @글꼴 진정 키트.

소마 디자인도 함께 모았습니다 FontFriend 북마크, 이는 한 페이지의 글꼴을 즉석에서 재정의하여 물건을 시험해 볼 수 있습니다. Firefox 3.6+의 Drag-and-Drop @Font-Face 지원이 포함되어 있습니다.

최근에는 Google이 제공하기 시작했습니다 Google 웹 글꼴, 오픈 소스 라이센스로 제공되고 Google 서버에서 제공되는 다양한 글꼴.

라이센스 제한

마지막으로 WebFonts.info는 멋진 위키 목록을 만들었습니다. @font-face 포함에 사용할 수있는 글꼴 라이센스를 기반으로합니다. 철저한 목록이라고 주장하지는 않지만 내부/링크를위한 글꼴 (CSS 파일의 속성과 같은 조건)을 사용할 수 있어야합니다. 라이센스를 읽는 것이 중요합니다, 글꼴 다운로드에서 명백히 앞으로 나아 가지 않는 몇 가지 제한 사항이 있기 때문입니다.

다른 팁

노력하다 FaceType.js, 당신은 .ttf 글꼴을 JavaScript 파일로 변환합니다. 전체 SEO 호환, FF, IE6 및 SAFARI를 지원하고 다른 브라우저에서 우아하게 저하됩니다.

아니요, 출혈에 대한 브라우저가있는 사람들에게만 적용 할 의향이 없다면 신체 유형에 대한 괜찮은 솔루션이 없습니다.

Microsoft가 있습니다 씨실, 그들 자체의 독점 글꼴 엠 베딩 기술이지만, 나는 몇 년 동안 이야기를 듣지 못했고 그것을 사용하는 사람은 아무도 없습니다.

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 (True Type Font) 임베딩을 지원하며 적어도 Safari는 동일한 메커니즘을 통해 SVG 글꼴을 지원합니다. 목록은 이것에 대해 좋은 토론을했습니다. 뒤.

체크 아웃 타자, 상업용 옵션 (무료 패키지도 있습니다).

사용중인 브라우저에 따라 다른 기술을 사용합니다 (@font-face vs. EOT 형식), 그들은 또한 당신을 위해 모든 글꼴 라이센스 문제를 처리합니다. 모든 것을 IE6까지 지원합니다.

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

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

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow