css怎麼載入外部字型文件

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

本教學操作環境：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: 'fontnameRegular';
 src: url('fontname.eot');
 src: local('fontname Regular'),
        local('fontname'),
        url('fontname.woff') format('woff'),
        url('fontname.ttf') format('truetype'),
        url('fontname.svg#fontname') format('svg');
}

3、使用剛剛定義的字體

h1{font-family: fontnameRegular}

（學習影片分享： css影片教學）

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