css如何加載外部字體文件

這篇文章主要介紹“css如何加載外部字體文件”，在日常操作中，相信很多人在css如何加載外部字體文件問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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、使用剛剛定義的字體

h2{font-family: fontnameRegular}

到此，關于“css如何加載外部字體文件”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！