CSS字體控制之font-family使用詳解

一、什麼是font-family

在CSS中，font-family用來設置元素的字體，它控制的是一個元素文字顯示的字體，比如下面的代碼：

    p {
        font-family: Arial, sans-serif;
    }

這行 CSS 代碼的作用是為 p 元素設置字體，其基本語法為：

    選擇器 {
        font-family: 字體名稱;
    }

font-family對應的屬性值是一個由字體名稱和字體族名組成的列表，該列表以優先順序列出，每個成員由逗號分隔。在大多數情況下，字體族名和字體名稱是等同的。對於一個不存在於此列表中的字體，瀏覽器將會使用第一個備選字體中的字體進行替代。

二、font-family的常見值

1. 指定系統字體

想要元素使用特定的字體，可以通過兩種方式實現：

（1）使用通用字體族名

通用字體族名包括：”serif”、”sans-serif”、”monospace”、”cursive”以及”fantasy”等。它們是表示特定類型字體的重要關鍵詞，瀏覽器會根據指定的關鍵詞選擇一下子列表中的對應字體來顯示。

例如，我們給p元素設定如下CSS樣式：

    p {
        font-family: serif;
    }

就會在瀏覽器中顯示一個襯線字體的序列，比如Times或Georgia。

（2）指定特定字體名稱

可以使用字體名稱來指定字體，例如：

    p {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

在上面的代碼中，為了使某些特定用戶使用Helvetica Neue字體，使用了引號把字體名稱改成了具體的文字。

2. 引入自定義字體

除了系統字體以外，你可能還需要使用自定義的字體，如公司logo中的某個特定字體。為了完成這一操作，需要用到@font-face規則進行定義，在網站內部載入自定義的字體文件。

例如，我們想要使用自定義字體 “Myriad Pro”，就可以通過以下代碼來引入字體文件：

    @font-face {
        font-family: "Myriad Pro";
        src: url("myriadpro.ttf");
    }
    body {
        font-family: "Myriad Pro", Arial, sans-serif;
    }

該片 CSS 代碼定義了一個名為 “Myriad Pro” 的字體，該字體載入自存儲在CSS文件同一個目錄下的 “myriadpro.ttf” 文件中。CSS代碼說明，為頁面中所有從body元素繼承的元素，設置字體 “Myriad Pro”，但如果無法載入該字體時，則使用 Arial 或 sans-serif 作為後備字體族。

三、font-family注意事項

1. 字體大小和font-family

font-size和font-family是影響文字展示的最兩個重要參數，使用不當會使得文字在不同設備、不同解析度下出現錯亂。

（1）字體的大小單位

字體大小的值可以使用像素、em、rem等單位。其中像素單位無論在哪個屏幕都是固定的，而em和rem則會隨著頁面上下文的變化而變化。在字體大小選擇上，一般建議使用像素作為基礎單位，可以保證在不同解析度下文字大小的一致性。

（2）字體的繼承性

font-family 會被進行繼承，但在大多數情況下字體大小不會被繼承。

2. 字體選擇的一些小技巧

（1）web safe字體

所有瀏覽器通用的字體有幾款被廣泛認可，它們被稱為「web safe字體」，包括Arial, Helvetica, Times New Roman, Times, Courier New, Courier等。它們既美觀又便於瀏覽器載入，建議在開發中優先選擇。

（2）區分操作系統類型

由於Windows、MacOS、Linux等操作系統往往已經預裝了不同品牌的字體，前端工程師在設置字體時可以選擇該操作系統預裝的字體，以達到更好的兼容性。

（3）字體的適應程度和連字

某些字體不適用於特定的關鍵字，因為它們的連字可能會使文字難以辨認。請先在「font-family」屬性中設置備用字體，以便即使備選字體發生失敗，瀏覽器也可以使用其他更適合的字體。

四、總結

CSS的font-family是前端開發中必不可少的一個屬性，不同的字體可以帶來不同的視覺效果，更好地表現文本信息。使用font-family時，需要注意字體大小和字體的繼承性，同時使用web safe字體可以保證瀏覽器兼容性。在選擇字體的時候，可以考慮專門設計的字體或者區分操作系統類型等方面，提高開發效果。