網(wǎng)頁(yè)設(shè)計(jì)中的字體匹配

  • 2018-09-29 14:53:15
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://m.supportcoffeeroasters.com

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

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

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

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

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

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

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

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

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

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

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

body {font-family: Times, serif;}

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

font-face 規(guī)則

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

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

字體名匹配

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

智能字體匹配

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

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

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

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

字體合成

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

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

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

字體下載

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

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

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

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

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

小結(jié)

盡管網(wǎng)頁(yè)設(shè)計(jì)人員不能指望文檔中一定使用某個(gè)特定的字體,不過(guò)可以很容易地指定通用字體系列。這種特殊行為得到了很好的支持,因?yàn)槿绻脩舸聿辉试S網(wǎng)頁(yè)設(shè)計(jì)人員(甚至讀者)指定字體,會(huì)很快發(fā)現(xiàn)這種用戶代理不受歡迎。

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

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

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

[1]注1:注意,有7個(gè)絕對(duì)大小關(guān)鍵字,因?yàn)橛?個(gè)字體大?。ɡ纾?lt;font size="5">)。由于一般的默認(rèn)字體大小歷來(lái)都是3,所以CSS絕對(duì)大小關(guān)鍵字中的第3個(gè)值就指示默認(rèn)字體大小。因?yàn)榈?個(gè)關(guān)鍵字剛好是small,所以Explorer會(huì)有這樣的行為。


當(dāng)前文章標(biāo)題:網(wǎng)頁(yè)設(shè)計(jì)中的字體匹配

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/font-match.html

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

下一篇:網(wǎng)頁(yè)設(shè)計(jì)中文本的縮進(jìn)和水平對(duì)齊

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))