> 웹 프론트엔드 > CSS 튜토리얼 > CSS에서 외부 글꼴 파일을 로드하는 방법

CSS에서 외부 글꼴 파일을 로드하는 방법

青灯夜游
풀어 주다: 2021-11-10 16:55:09
원래의
8910명이 탐색했습니다.

CSS에서는 "@font-face" 규칙을 사용하여 외부 글꼴 파일을 로드할 수 있습니다. 구문 @font-face {font-family: 글꼴 이름; src: url (외부 글꼴 파일 경로); : 두께 값];[글꼴 스타일: 스타일 값];}".

CSS에서 외부 글꼴 파일을 로드하는 방법

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

CSS에서는 "@font -face" 규칙을 사용하여 외부 글꼴을 로드합니다. @font-face”规则来加载外部字体文。

@font-face是CSS3中的一个模块,它主要是把用户自定义的Web字体嵌入到你的网页中。

通过使用 @font-face 规则,Web 设计师不必再使用任何一种“网络安全”字体。

在 @font-face 规则中,您必须首先定义字体名称(例如 myFirstFont),然后指向字体文件。

@font-face的语法规则:

@font-face {
      font-family: 字体名称;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }
로그인 후 복사
  • font-family: 字体名称 :自定义字库名称(一般设置为所引入的字库名),后续样式规则中则通过该名称来引用该字库。

  • src

    @font-face는 주로 사용자 정의 웹 글꼴을 웹 페이지에 삽입하는 CSS3의 모듈입니다.

    @font-face 규칙을 사용하면 웹 디자이너는 더 이상 어떤 종류의 "웹 안전" 글꼴도 사용할 필요가 없습니다.

    @font-face 규칙에서는 먼저 글꼴 이름(예: myFirstFont)을 정의해야 합니다.

@font-face:

@font-face {
 font-family: &#39;fontnameRegular&#39;;
 src: url(&#39;fontname.eot&#39;);
 src: local(&#39;fontname Regular&#39;),
        local(&#39;fontname&#39;),
        url(&#39;fontname.woff&#39;) format(&#39;woff&#39;),
        url(&#39;fontname.ttf&#39;) format(&#39;truetype&#39;),
        url(&#39;fontname.svg#fontname&#39;) format(&#39;svg&#39;);
}
로그인 후 복사
  • font-family: 글꼴에 대한 파일 구문 규칙을 가리킵니다. 이름: 글꼴 이름을 정의하기 때문에(일반적으로 가져온 글꼴의 이름으로 설정됨) 글꼴은 후속 스타일 규칙에서 이 이름으로 참조됩니다

  • src : 글꼴의 로딩 경로와 형식을 설정합니다. 여러 로딩 경로와 형식을 쉼표로 구분합니다.

    srouce: 글꼴의 로딩 경로(절대 또는 상대 URL일 수 있음)

    format: 주로 글꼴의 형식입니다. 브라우저 인식에 사용되는 유형은 일반적으로 truetype, opentype., truetype-aat, Embedded-opentype, avg 등입니다.

    🎜🎜css용 외부 글꼴 파일 사용 방법🎜🎜🎜1 먼저 글꼴을 다운로드하세요. 🎜🎜2. @font 사용 - 얼굴 규칙은 글꼴을 소개하고 이름에 적합한 이름을 지정합니다🎜
    h1{font-family: fontnameRegular}
    로그인 후 복사
    🎜3. 방금 정의한 글꼴을 사용하세요🎜rrreee🎜(동영상 공유 학습: 🎜css 동영상 튜토리얼) 🎜)🎜

    위 내용은 CSS에서 외부 글꼴 파일을 로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿