HTML5 및 CSS3 기반 웹 페이지에 포함 글꼴을 사용하는 방법 - 인형

HTML5 웹 개발자는 웹 페이지의 글꼴을 제안 할 수 있지만 일반적으로 글꼴 파일은 클라이언트 수준의 자산입니다. 클라이언트에 글꼴이 설치되어 있지 않으면 글꼴이 표시되지 않습니다. 다행스럽게도 CSS3는 다운로드 가능한 글꼴을 제공하는 합리적인 솔루션을 지원합니다.

스타일은 대부분의 CSS 요소처럼 작동하지 않습니다. 페이지의 일부에 마크 업을 적용하지 않습니다. 대신 다른 마크 업에서 사용할 수있는 새 CSS 값을 정의합니다. 특히 서버에 글꼴 파일을 배치하고 해당 글꼴을 사용하여 글꼴 군을 정의 할 수 있습니다.

@ font-face {font-family: "Miama"; src: url ("Miama. otf");}

font-family 속성은 나머지 CSS 코드에서이 폰트를 부여 할 이름을 나타냅니다. 일반적으로 글꼴 파일 이름과 유사합니다. font-family 속성은 서버에서 발견되는 실제 글꼴 파일의 URL입니다. 폰트 페이스가 정의 된 후에는 CSS 코드의 나머지 부분에있는 일반 속성에서 사용할 수 있습니다:

h1 {font-family: Miama;}

사용자 정의 글꼴 예제 코드는 다음과 같습니다.

EmbeddedFont @ font-face {font-family: "Miama"; src: url ("Miama. otf");} @ font-face {font-family: "spray"; src: url ("ideoma_SPRAY. otf");} h1 {font-family: Miama; font-size: 300 %;} h2 {font-family: spray;}

임베디드 폰트 데모

다음은 또 다른 맞춤 폰트입니다.

모든 최신 브라우저는 @ font- face 기능을 지원하지만, 브라우저마다 다릅니다. 기본 글꼴 유형은 다음과 같습니다.

• TTF: 표준 트루 타입 형식은 잘 지원되지만 모든 브라우저에서 지원되지는 않습니다. 많은 오픈 소스 글꼴이이 형식으로 제공됩니다.

• OTF: 이는 TTF와 유사하지만 진정한 개방형 표준이므로 개방형 표준에 관심이있는 사람들이 선호합니다. 그것은 IE를 제외한 대부분의 브라우저에서 지원됩니다.

• WOFF: WOFF는 현재 Firefox에서 지원하는 제안 된 표준 형식입니다. Microsoft는 IE에서이 형식을 지원할 것을 암시했습니다.

• EOT: Microsoft의 독점적 인 포함 글꼴 형식입니다. IE에서만 작동하지만 공정하게 말하면 Microsoft는 수년 동안 글꼴 지원 기능을 내장했습니다.

온라인 글꼴 변환기와 같은 글꼴 변환 도구를 사용할 수 있습니다. co.kr / / 원하는 글꼴 형식으로 변환하십시오.

여러 src 속성을 제공 할 수 있습니다. 이렇게하면 다양한 브라우저에서 작동 할 수 있도록 글꼴의 EOT 및 OTF 버전을 모두 포함 할 수 있습니다.

이 기술을 사용하면 글꼴 파일의 복사본을 로컬로 가져와야합니다.웹 페이지와 동일한 디렉토리에 있어야합니다. 웹 서버에서 호스팅을 시작하면 웹 페이지에 필요한 다른 모든 자원과 함께 글꼴 파일을 서버로 옮길 수 있습니다. 글꼴을 포함 할 수 있다고해서 꼭해야한다는 것은 아닙니다. 가독성에 대해 신중히 생각하십시오. 또한

지적 재산권을 존중해야한다. 다행스럽게도 무료 오픈 소스 글꼴이 많이 있습니다. 먼저 Open Font Library를 살펴보십시오. Google 글꼴은 무료 글꼴을위한 훌륭한 리소스입니다. Google 글꼴 도구를 사용하면 Google 서버에 포함 된 글꼴을 선택할 수 있으며 다운로드하지 않고도 글꼴을 사용할 수있게 해주는 코드를 복사 할 수 있습니다.