網(wǎng)頁設計中的字體匹配

  • 2018-09-29 14:53:15
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://www.iy5y368.cn

可以看到,CSS網(wǎng)頁設計允許匹配字體系列、加粗和變形,所有這些都是通過字體匹配完成的,這是一個相當復雜的過程。如果網(wǎng)頁制作人員想幫助用戶代理在顯示其文檔時做出正確的字體選擇,了解這個過程就很重要。我把這個內(nèi)容留到這一章的最后才介紹,因為這對于理解字體屬性如何工作并不是必要的,有些讀者可能想跳過這個部分直接看下一章,如果你還對這個內(nèi)容感興趣,下面將介紹字體匹配是如何工作的。

用戶代理創(chuàng)建(或訪問)一個字體屬性數(shù)據(jù)庫。這個數(shù)據(jù)庫列出了用戶代理能訪問的所有字體的各種CSS屬性。一般地,這將是機器上安裝的所有字體,雖然可能還包含另外的一些字體(例如,用戶代理可以有自己的內(nèi)置字體)。如果用戶代理遇到兩種相等的字體,會把其中一個忽略。

用戶代理取得應用了字體屬性的元素,并構建一個字體屬性列表,其中列出顯示該元素的必要字體屬性?;谶@個列表,用戶代理先對顯示元素時使用的字體系列做第一個選擇。如果完全匹配,那么用戶代理就可以使用這個字體。否則,需要多做一些工作。

字體首先根據(jù)font-style進行匹配。關鍵字italic可以與所有標有“italic”或“oblique”的字體匹配,如果沒有這樣的字體,則匹配失敗。

接下來再根據(jù)font-variant進行匹配。未標“small-caps”的字體都認為是normal。與small-caps匹配的字體可以是標為“small-caps”的字體,也可以是允許合成small-caps風格的字體,或者是用大寫字母替換小寫字母的字體。

然后根據(jù)font-weight匹配,由于網(wǎng)頁設計中處理font-weight的特殊方式,這個匹配絕不會失?。ㄟ@在本章前面已經(jīng)解釋過)。

之后再針對font-size進行匹配。必須在某個可忍受的范圍內(nèi)匹配,不過這種忍受程度要由用戶代理定義。因此,一個用戶代理可能認為錯誤不超過20%都能匹配,而另一個用戶代理則只允許指定大小與實際使用的大小之間有10%的差異。

如果在第2步中未匹配任何字體,用戶代理就會在這個字體系列中查找下一個候選的字體。如果找到了,則對該字體重復第2步。

假設找到一個通用匹配,但是其中不包含顯示給定元素所需的一切——例如,這種字體沒有版權符號——用戶代理就要回到第3步,再搜索另一個候選字體,然后再通過第2步來驗證這種字體是否匹配。

最后,如果沒有找到匹配,而且所有候選字體都已經(jīng)試過了,用戶代理就會為給定的通用字體系列選擇默認字體,盡其所能正確地顯示這個元素。

整個過程很長,也很麻煩,不過這有助于理解用戶代理如何選擇字體。例如,你可能想指定在一個文檔中使用Times或任何其他serif字體:

body {font-family: Times, serif;}

對每個元素,用戶代理要檢查該元素中的字符,并確定Times是否能提供匹配的字符。在大多數(shù)情況下,網(wǎng)站制作人員確實能做到這一點而沒有任何問題。不過,假設段落中有一個漢字字符,Times沒有與這個漢字匹配的字符,所以用戶代理必須忽略這個字符,或者查找另一個能滿足該元素顯示需求的字體。當然,任何西方字體都不太可能包含中文字符,不過假設存在這樣一種字體(暫且稱之為AsiaTimes),用戶代理顯示該元素時可以使用這個字體——或者只是在顯示這個字符時使用該字體.因此,可能整個段落用AsiaTimes顯示,或者段落中的所有內(nèi)容都用Times顯示,只有那個中文字符除外,它用AsiaTimes顯示。

font-face 規(guī)則

CSS2引入了一種方法,可以通過@font-face規(guī)則對字體匹配有更多控制。在2003年春天前,所有Web瀏覽器都沒有充分實現(xiàn)這個規(guī)則,所以@font-face已經(jīng)從CSS2.1去除。我不打算在這上面多花功夫,因為這個規(guī)則的各個方面相當復雜,單是說明這個規(guī)則就可能需要整個一章(甚至一本書)的篇幅才能做到。

有4種方法可以確定文檔中使用的字體。我們將簡要討論這4種方法,因為CSS的將來版本可能使用這種機制,而且大多數(shù)SVG顯示器至少部分支持CSS2中描述的font-face 匹配。如果你需要實現(xiàn)@font-face,請參考CSS2規(guī)范,或者任何最新版本的CSS (如CSS3 web fonts模塊),下面的描述并不完備。

字體名匹配

要在網(wǎng)頁設計中匹配字體名,用戶代理會使用與所請求字體有相同系列名的一種可用字體。這種字體的外觀和度量與所請求的字體可能并不相同,這是本節(jié)前面介紹的方法。

智能字體匹配

在這種情況下,用戶代理使用外現(xiàn)上與所請求字體最接近的一種可用字體。這兩種字體可能并不能完全匹配,但是它們應當盡可能地接近。

用于匹配兩種字體的信息包括字體種類(文本或符號)。是否有上下短線、加粗、大寫字母高度、x-height、上升、下降、傾斜等等。例如,一個網(wǎng)站制作人員可能要求一個字體與某傾斜字體盡可能地接近,為此寫出以下規(guī)則:

@font-face {font-style: normal; font-family:"Times"; slope:-5;}

然后由用戶代理找到一個serif normal(豎直)字體,如果Times無法滿足要求,將其向右傾斜5度盡可能接近傾斜字體。CSS2中還描述了字體的很多其他方面,如果用戶代理支持這些方面,所有這些都可以用于完成匹配過程。

字體合成

用戶代理也可以選擇實時地生成一個字體,使其外觀和度量與@font-face規(guī)則中指定的描述相匹配。CSS2這樣描述這個過程:

在這種情況下,用戶代理創(chuàng)建一個字體,它不僅在外現(xiàn)上幾乎匹配,而且與所請求字體的度量匹配。合成信息包括匹配信息,通常需要比某些匹配機制使用更準確的參數(shù)值。具體地,如果要保留指定字體的所有布局特征,合成需要準確的寬度度量和字符來完成字形和位置信息替換。

如果你對這些已經(jīng)了解,可能就不需要我再多做解釋了。如果你還不了解,也許根本不需要擔心這個問題。

字體下載

采用這種方法,用戶代理可以在文檔中下載一個遠程字體來使用。要聲明一個下載字體,可以寫如下規(guī)則:

@font-face {font-family:"Scarborough Fair";

src: url<http://www.ejcaniple.com/fonts/ps/scarborough.ps>;}

然后就可以在整個文檔中使用該字體了。

即使用戶代理允許字體下載,可能也要花一些時間才能獲取到字體文件(這種文件往往很大這就會延遲文檔的顯示,或者至少延遲最終輸出。

小結

盡管網(wǎng)頁設計人員不能指望文檔中一定使用某個特定的字體,不過可以很容易地指定通用字體系列。這種特殊行為得到了很好的支持,因為如果用戶代理不允許網(wǎng)頁設計人員(甚至讀者)指定字體,會很快發(fā)現(xiàn)這種用戶代理不受歡迎。

對于字體管理的其他方面,相應的支持程度則有所不同。往往能很好地改變字體大小,不過在這方面20世紀的用戶代理實現(xiàn)差別很大,有些極其簡化,有些則非常正確。對網(wǎng)頁設計人員來說,讓人困惑的往往不是以何種方式支持字體大小調(diào)整,而是他們想用的單位(點)在不同媒體上得到的結果可能差異很大,甚至在不同操作系統(tǒng)和用戶代理上也可能得到不同的結果。使用點作為單位有很多危險,在網(wǎng)頁設計中使用長度單位通常不是一個好主意。百分數(shù)、em單位和ex單位往往更適合修改字體大小,因為這些單位在所有常用顯示環(huán)境中能很好地縮放。

另一個讓人困惑的方面可能是一直缺少一種機制來指定要下載并在文檔中使用的字體。這意味著創(chuàng)作人員仍依賴于用戶可用的字體,因此,他們無法預計文本會有怎樣的外觀。

說到為文本指定樣式,還有很多不涉及字體的方法,這是下一章要討論的內(nèi)容。

[1]注1:注意,有7個絕對大小關鍵字,因為有7個字體大?。ɡ?,<font size="5">)。由于一般的默認字體大小歷來都是3,所以CSS絕對大小關鍵字中的第3個值就指示默認字體大小。因為第3個關鍵字剛好是small,所以Explorer會有這樣的行為。


當前文章標題:網(wǎng)頁設計中的字體匹配

當前URL:http://www.iy5y368.cn/news/wzzz/font-match.html

上一篇:網(wǎng)頁設計中字體屬性的設置

下一篇:網(wǎng)頁設計中文本的縮進和水平對齊

網(wǎng)站建設、網(wǎng)絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)