css外部字體怎麼引入？ css外部字體的引入方法介紹

在網站頁面中有時我們需要有一個好看的字體，畢竟好看的字體會讓整個頁面看起來更加美觀也更吸引用戶，我們可能會想到用圖片來實現這個好看的字體，但是今天的這篇文章並不是為大家介紹利用圖片來做一個好看的字體，而是給大家來介紹一下css外部字體引入的方法。

話不多說，我們直接進入正題~

我們引入css外部字體需要利用的是css3的@font-face，@font-face是什麼呢？ 下面我們來看看

@font-face是CSS3中的一個模組，它主要是把自己定義的Web字體嵌入到你的網頁中。

首先我們來看看@font-face的語法規則：

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

font-family: ：自訂字庫名稱（一般設定為所引入的字庫名稱），後續樣式規則中則透過該名稱來引用該字庫。

src ：設定字型的載入路徑和格式，透過逗號分隔多個載入路徑和格式

說明：src屬性後面還有一個local(font name)字段，表示從使用者係統載入字體，失敗後才載入webfont。

src: local(font name), url("font_name.ttf")

srouce ：字體的載入路徑，可以是絕對或相對URL。

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

font-weight 和 font-style 和之前使用的是一致的。

接著我們就來看css外部字體引入的實作方法：

第一步，在CSS中引入字體並給名字取一個合適的名字，如下

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

font.css：

@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');
}

說明：

fontname代表字型檔名的名稱

例如你的字體檔案是php.ttf，那麼上面的fontname全部要改為php

font-family定義字體的名字，接下來的src就是載入字型檔案的位置，之所有有多個url就是因為瀏覽器相容問題。

第二步，使用剛剛定義的字體，如下

h1{font-family: fontnameRegular}

這篇文章到這裡就全部結束了，更多精彩內容可以關注php中文網相關教程欄目！ ！ ！

以上是css外部字體怎麼引入？ css外部字體的引入方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！