HTML 문서에 외부 글꼴을로드하려면 어떻게합니까?

HTML 문서에 외부 글꼴을로드하려면 어떻게합니까?

---

HTML 문서에 외부 글꼴 파일을로드하려면 어떻게합니까?

예 : HTML CSS 및 / 또는 JAVASCRIPT를 사용하여 동일한 디렉토리의 TTF 파일에서 "blah blah blah blah blah blah blah"텍스트를 사용자 정의 글꼴로 만듭니다.

---

이 A List Apart 기사를 살펴보십시오 . 적절한 CSS는 다음과 같습니다.

@font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

위의 내용은 Chrome / Safari / FireFox에서 작동합니다. Paul D. Waite가 주석에서 지적했듯이 글꼴을 EOT 형식으로 변환하면 IE에서 작동하도록 할 수 있습니다 .

좋은 소식은 모든 사용자가 동일한 글꼴을 볼 수 없다는 사실을 알고 있고 편안하게 사용하는 한 이전 브라우저에서이 기능이 정상적으로 저하되는 것 같다는 것입니다.

---

Paul Irish는 대부분의 일반적인 문제를 해결하는 방법을 가지고 있습니다. 그의 방탄 @ font-face 기사를 참조하십시오 .

IE에서 불필요한 데이터를 다운로드하지 못하도록 차단하고 IE8, Firefox, Opera, Safari 및 Chrome에서 작동하는 최종 변형은 다음과 같습니다.

@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");
}

그는 또한 글꼴을 필요한 모든 형식으로 번역 하는 생성기에 연결 합니다.

다른 사람들이 이미 지정했듯이 이것은 최신 세대의 브라우저에서만 작동합니다. 가장 좋은 방법은 이것을 Cufon과 같은 것과 함께 사용하고 브라우저가를 지원하지 않는 경우에만 Cufon을로드하는 것 @font-face입니다.

---

CSS3는 @ font-face 규칙으로이를 수행하는 방법을 제공합니다.

http://www.w3.org/TR/css3-webfonts/#the-font-face-rule

http://www.css3.info/preview/web-fonts-with-font-face/

여기에 @ font-face 규칙을 지원하지 않는 브라우저에서 작동 다른 여러 가지 방법이다.

---

Jay Stevens의 답변에 대해 "HTML 파일에서 사용할 수있는 글꼴은 사용자의 컴퓨터에 있어야하며 웹 브라우저에서 액세스 할 수 있어야합니다. 따라서 별도의 외부 프로세스를 통해 사용자의 컴퓨터에 글꼴을 배포하려는 경우가 아니면 하지마. " 사실입니다.

그러나 자바 스크립트 / 캔버스 / 플래시를 사용하는 또 다른 방법이 있습니다. 아주 좋은 솔루션은 cufon을 제공합니다. http://cufon.shoqolate.com/generate/ 라이브러리는 사용하기 매우 쉬운 외부 ​​글꼴 메서드를 생성합니다.

---

CSS3보다 더 많은 브라우저를 지원하려면 오픈 소스 라이브러리 cufon javascript 라이브러리를 참조하세요.

더 펑키 한 작업을하고 싶다면 여기 에 API 가 있습니다.

Major Pro : 원하는 / 필요한 작업을 수행 할 수 있습니다.

주요 단점 : 일부 브라우저에서 텍스트 선택을 허용하지 않으므로 헤더 텍스트에 적절하게 사용할 수 있습니다 (원하는 경우 모든 사이트에서 사용할 수 있음).

---

Microsoft는 포함 된 글꼴 ( http://msdn.microsoft.com/en-us/library/ms533034(VS.85).aspx ) 을 포함하는 독점적 인 CSS 방법을 가지고 있지만 권장해서는 안됩니다.

이전에 sIFR 을 사용한 적이 있습니다. 이 기능은 훌륭합니다. Javascript와 Flash를 사용하여 원하는 글꼴에 동일한 텍스트를 포함하는 일부 Flash로 동적으로 대체합니다 (글꼴이 Flash 파일에 포함되어 있음). 이것은 텍스트 주변의 마크 업에 영향을주지 않고 (CSS 클래스를 사용하여 작동 함) 텍스트를 선택할 수 있으며 사용자가 Flash를 사용하지 않거나 비활성화 한 경우 모든 글꼴의 텍스트로 정상적으로 저하됩니다. CSS에서 지정합니다 (예 : Arial).

---

이 시도

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>

---

I did not see any reference to Raphael.js. So I thought I'd include it here. Raphael.js is backwards compatible all the way back to IE5 and a very early Firefox as well as all of the rest of the browsers. It uses SVG when it can and VML when it can not. What you do with it is to draw onto a canvas. Some browsers will even let you select the text that is generated. Raphael.js can be found here:

http://raphaeljs.com/

It can be as simple as creating your paper drawing area, specifying the font, font-weight, size, etc... and then telling it to put your string of text onto the paper. I am not sure if it gets around the licensing issues or not but it is drawing the text so I'm fairly certain it does circumvent the licensing issues. But check with your lawyer to be sure. :-)

ReferenceURL : https://stackoverflow.com/questions/2237540/how-do-i-load-external-fonts-into-an-html-document