首頁  >  文章  >  web前端  >  css怎麼載入外部字型文件

css怎麼載入外部字型文件

青灯夜游
青灯夜游原創
2021-11-10 16:01:428852瀏覽

在css中,可利用「@font-face」規則來載入外部字體文件,語法@font-face {font-family:字體名稱;src:url(外部字體檔案路徑);[font -weight:粗細值];[font-style:樣式值];}」。

css怎麼載入外部字型文件

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

在css中,可利用「@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 :設定字型的載入路徑和格式,透過逗號分隔多個載入路徑和格式

    srouce :字型的載入路徑,可以是絕對或相對URL。

    format :字型的格式,主要用於瀏覽器識別,一般有以下幾種-truetype,opentype,truetype-aat,embedded-opentype ,avg等。

css使用外部字體檔案的方法

1、首先要下載好字體,並且放在了font目錄下

2、使用@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;);
}

3、使用剛剛定義的字體

h1{font-family: fontnameRegular}

(學習影片分享: css影片教學

以上是css怎麼載入外部字型文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn