사용자 정의 글꼴을 정의하려면 어떤 CSS 규칙이 필요합니까?

사용자 정의 글꼴을 정의하려면 CSS "@font-face" 규칙이 필요합니다. "@font-face" 규칙은 주로 사용자 정의 웹 글꼴을 웹 페이지에 포함시키는 것입니다. 구문은 "@font-face{font-family: 'font name';src:url('file address');}입니다. ".

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

페이지에서 사용자 정의 글꼴을 지원하도록 하려면 @font-face를 한 문장으로 사용할 수 있습니다.

@font-face는 CSS3의 모듈로, 주로 자체 정의된 웹 글꼴을 웹 페이지에 포함시킵니다. @font-face 모듈이 등장하면서 웹 개발에 사용됩니다. 웹 안전 글꼴만 사용하는 것입니다. @font-face 사용법을 살펴보겠습니다.

먼저 @font-face의 문법 규칙을 살펴보겠습니다.

   @font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

값 설명

1. YourWebFontName: 이 값은 다운로드한 기본 글꼴을 사용하는 것이 가장 좋습니다. 이는 웹 요소의 글꼴 모음을 참조합니다. 예: "font-family: "YourWebFontName";"

2. 소스: 이 값은 상대 경로 또는 절대 경로일 수 있는 사용자 정의 글꼴의 저장 경로를 나타냅니다. to는 브라우저가 이를 식별하는 데 주로 사용되는 사용자 정의 글꼴 형식입니다. 해당 값에는 주로 truetype, opentype, truetype-aat, Embedded-opentype, avg 등이 포함됩니다. , 두께 및 스타일: 이 두 값을 잘 알고 있어야 합니다. 무게는 글꼴의 볼드체 여부를 정의하고 스타일은 주로 이탤릭체와 같은 글꼴 스타일을 정의합니다.

브라우저와 호환 가능

@font-face와의 브라우저 호환성 문제에 대해 말하면 이는 글꼴 형식 문제와 관련이 있습니다. 브라우저마다 글꼴 형식에 대한 지원이 일관되지 않기 때문에 모든 사람이 어떤 종류인지 알아야 합니다. 다양한 버전의 브라우저에서 지원되는 글꼴입니다. 이제 모든 사람이 알 수 있도록 이 문제에 대해 별도로 설명하겠습니다.

1. TrueTpe(.ttf) 형식:

.ttf 글꼴은 Windows 및 Mac에서 가장 많이 사용되는 글꼴입니다. RAW 형식이므로 웹사이트에 최적화되어 있지 않습니다. 이 글꼴을 지원하는 브라우저는 [IE9+, Firefox3.5+, Chrome4+, Safari3+, Opera10+, iOS Mobile입니다. Safari4.2+];

2. OpenType(.otf) 형식:

.otf 글꼴은 TrueType을 기반으로 구축된 원본 글꼴 형식으로 간주되므로 더 많은 기능을 제공합니다. 이 글꼴 지원에는 [Firefox3.5+, Chrome4.0+, Safari3.1+, Opera10.0+, iOS Mobile Safari4.2+]가 포함됩니다.

3. 웹 개방형 글꼴 형식(.woff) 형식:

.woff 글꼴은 웹 글꼴 중 가장 좋은 형식입니다. TrueType/OpenType의 개방형 압축 버전이기도 하며, 이를 지원합니다. 글꼴 브라우저에는 [IE9+, Firefox3.5+, Chrome6+, Safari3. 6+, Opera11.1+];

4. Embedded Open Type(.eot) 형식:

.eot 글꼴은 IE용 특수 글꼴이며, 이를 지원하는 브라우저에서 이 형식 글꼴을 만들 수 있습니다. 글꼴은 [IE4+]입니다. SVG(.svg) 형식:

.svg 글꼴은 SVG 글꼴 렌더링을 기반으로 하는 형식이며, 이 글꼴이 지원되는 브라우저에는 [Chrome4+, Safari3.1+, Opera10.0이 포함됩니다. +, iOS 모바일 Safari3.2+].

즉, @font-face에는 .woff 및 .eot라는 두 가지 이상의 형식 글꼴이 필요하며 더 많은 탐색 버전을 지원하려면 .svg 및 기타 글꼴도 필요합니다.

더 많은 브라우저 지원을 위해 @font-face를 활성화하기 위해 Paul Irish

는

Bulletproof @font-face

:

   @font-face {
	font-family: 'YourWebFontName';
	src: url('YourWebFontName.eot?') format('eot');/*IE*/
	src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
   }

라는 고유한 @font-face 구문을 작성했습니다. 하지만 더 많은 브라우저 지원을 허용하려면

   @font-face {
	font-family: 'YourWebFontName';
	src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
	src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
             url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
   }

이렇게 쓸 수도 있습니다. 빈약한 이론적 지식을 이야기하다 보면 누구나 조금은 의아해할 텐데요. 먼저 W3CPLUS 홈페이지 내비게이션 부분에 파란색 글꼴을 구현하는 방법을 살펴보겠습니다. 이러한 DOM 태그에는 사용자 정의 글꼴 적용이 필요합니다: HTML 코드:

   <h2 class="neuesDemo">Neues Bauen Demo</h2>

@font-face를 통해 자신만의 웹 글꼴 정의:

  @font-face {
    font-family: 'NeuesBauenDemo';
    src: url('../fonts/neues_bauen_demo-webfont.eot');
    src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/neues_bauen_demo-webfont.woff') format('woff'),
	url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'),
	url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg');
    font-weight: normal;
    font-style: normal;
  }

여기서는 상대 경로를 사용합니다. 물론 이를 사용할 수도 있습니다. 절대 경로. 이 시점에서 정의된 글꼴을 실제 페이지에 적용해야 합니다.

   h2.neuesDemo {
      font-family: 'NeuesBauenDemo'
   }

효과:

(동영상 공유 학습: css 동영상 튜토리얼)

위 내용은 사용자 정의 글꼴을 정의하려면 어떤 CSS 규칙이 필요합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!