我曾與一位視覺(jué)設(shè)計(jì)師合作開(kāi)發(fā)Web 應(yīng)用程序。他提交給我的設(shè)計(jì)稿看起來(lái)非常令人印象深刻，所以我根據(jù)他的設(shè)計(jì)稿用HTML 和CSS 編寫(xiě)了Web 應(yīng)用程序。你知道當(dāng)我認(rèn)為一切都完成并匆忙向他展示產(chǎn)品時(shí)他說(shuō)了什么嗎？

“你都做錯(cuò)了。”

的確。我沒(méi)有按照他的模型使用字體，他為此專(zhuān)門(mén)叫我出來(lái)并告訴我這是一個(gè)巨大的錯(cuò)誤。我該如何彌補(bǔ)？

“我不知道。但毫無(wú)疑問(wèn)，這是目前最大的問(wèn)題。”

說(shuō)起來(lái)，在過(guò)去很長(zhǎng)一段時(shí)間里，我和不同的網(wǎng)頁(yè)設(shè)計(jì)師一起開(kāi)發(fā)過(guò)各種網(wǎng)站，這讓我逐漸開(kāi)始關(guān)注網(wǎng)頁(yè)設(shè)計(jì)中許多小而重要的細(xì)節(jié)，比如字體。

這里可以簡(jiǎn)單介紹一點(diǎn)背景知識(shí)。目前，大多數(shù)網(wǎng)站都是基于HTML和CSS開(kāi)發(fā)的。如果你沒(méi)有網(wǎng)站開(kāi)發(fā)的經(jīng)驗(yàn)，也許你需要找一個(gè)HTMLCSS的介紹視頻來(lái)學(xué)習(xí)，比如1小時(shí)創(chuàng)建一個(gè)體驗(yàn)不錯(cuò)的個(gè)人網(wǎng)站頁(yè)面。教程。

以下是我的視覺(jué)設(shè)計(jì)師教給我的字體知識(shí)。字體規(guī)格

改變某一種文字的字體樣式最簡(jiǎn)單的方法就是改變CSS的Font-family屬性。然后，瀏覽器會(huì)直接讀取用戶(hù)電腦上的字體。想必每個(gè)網(wǎng)站開(kāi)發(fā)人員都明白這一點(diǎn)。一般來(lái)說(shuō)，網(wǎng)站建設(shè)外包常用的安全字體一共有12種。除了比較特殊的Comic Sans之外，還有11種字體可以在大多數(shù)類(lèi)型的網(wǎng)站上自由使用。

如果你的眼睛只盯著這十幾個(gè)字體，那就太局限了。如果你足夠敏銳，你會(huì)有意識(shí)地調(diào)整字體的粗線(xiàn)（淺色、普通、粗體）和字間距，以追求更好的效果。例如，當(dāng)您在導(dǎo)航欄中使用超粗體字體時(shí)，緊湊的字體間距會(huì)使您的網(wǎng)站看起來(lái)更專(zhuān)業(yè)。反之，如果使用極細(xì)的字體，網(wǎng)頁(yè)會(huì)有一種非常銳利、清晰的感覺(jué)。

字體的另一個(gè)技巧是在CSS 中為字體添加font-shadow 屬性。

在以下示例中，字體系列設(shè)置為Helvetica，字體粗細(xì)設(shè)置為Extra Thin。

這種字體的一個(gè)例子來(lái)自我們的網(wǎng)絡(luò)應(yīng)用程序Nomster。字體棧

當(dāng)你指定使用什么字體時(shí)，你可以根據(jù)重要性設(shè)置一個(gè)順序，優(yōu)先級(jí)越高，優(yōu)先級(jí)越高。當(dāng)設(shè)備中沒(méi)有排名最高的字體時(shí)，系統(tǒng)會(huì)自動(dòng)調(diào)用排名最低的字體。這就是為什么Windows和Mac內(nèi)置的字體不一樣，但最終都能調(diào)用合適的字體，正常顯示網(wǎng)頁(yè)內(nèi)容的原因。對(duì)于此字體堆棧設(shè)置，以下工具/網(wǎng)站應(yīng)該可以幫助您：

CSS Tricks Font Stacks：這是一個(gè)包含8種不同字體的字體庫(kù)，直接從CSS Tricks中抓取這個(gè)字體庫(kù)，你的網(wǎng)站字體效果絕對(duì)不會(huì)像1995年以前的網(wǎng)站那么殘廢。

CSSFontStack.com：一個(gè)提供各種字體棧的網(wǎng)站，超過(guò)40種不同的字體棧供你選擇~

當(dāng)然，如果你通過(guò)谷歌和百度搜索，應(yīng)該可以找到更多的字體棧。

以下用例也來(lái)自我們的網(wǎng)絡(luò)應(yīng)用程序Nomster。它使用的字體堆棧也是我們最喜歡的，因?yàn)樗_實(shí)提高了網(wǎng)站的可讀性。

加載特定字體

在Web 應(yīng)用程序中使用特定的字體來(lái)顯示文本是非?？尚械?。你不必找一個(gè)“長(zhǎng)得像”的字體湊合，因?yàn)橄旅娴姆椒梢詭椭阒苯邮褂媚阆矚g的字體：字體托管服務(wù)

將通用字體加載到網(wǎng)站中確實(shí)需要一點(diǎn)技巧。字體托管服務(wù)可以為您做到這一點(diǎn)，有些是免費(fèi)的，有些是收費(fèi)的。

Google web Fonts：Google的字體服務(wù)還是很靠譜的，集成了很多優(yōu)質(zhì)的網(wǎng)絡(luò)字體供你調(diào)入你的網(wǎng)站。按照Google 的官方說(shuō)明，您可以輕松地在您的Web 應(yīng)用程序中調(diào)用這些字體。

當(dāng)您想在您的網(wǎng)站中使用Garamon 時(shí)

d這個(gè)字體的時(shí)候，你如果使用字體棧來(lái)調(diào)用的話(huà)，可能會(huì)因?yàn)闉g覽器差異而無(wú)法正常使用，也可能因?yàn)楸镜刈煮w而顯示不正常，而使用谷歌字體中的“EB Garamond”則不存在這樣的問(wèn)題，它不會(huì)調(diào)用本地字庫(kù)，而且大家電腦里面顯示也會(huì)完全一樣。
?
谷歌字體服務(wù)是免費(fèi)而易用的，并且會(huì)讓不同的系統(tǒng)不同的瀏覽器都保持一致的體驗(yàn)，那為什么會(huì)有人考慮其他的方案呢？原因很簡(jiǎn)單。谷歌字體平臺(tái)所收錄的字體多數(shù)是相對(duì)更開(kāi)放甚至是直接開(kāi)源的字體，但是有很多殺手級(jí)字體的開(kāi)發(fā)商并不愿意這么做。作為商品出售字體可以給這些開(kāi)發(fā)商帶來(lái)更大的利益，這使得你無(wú)法在谷歌字體平臺(tái)上找到它們。當(dāng)然，這個(gè)問(wèn)題也是可以解決的。

TypeKit ：這個(gè)字體網(wǎng)站也是耳熟能詳?shù)拇笳?。其中囊括了很多品質(zhì)優(yōu)秀的好字體，但是相信我，你看了會(huì)后悔的。為什么這么說(shuō)？那些看起來(lái)優(yōu)秀的字體并不便宜！基礎(chǔ)的服務(wù)需要每年上交25美元，而高級(jí)版的每年需要交100美元！當(dāng)然，如果不差錢(qián)的話(huà)，選擇TypeKit也不錯(cuò)~

所以，最好不要告訴與你合作的設(shè)計(jì)師，否則他們會(huì)逼著你整套整套得買(mǎi)字體的?。ㄍ蝗灰庾R(shí)到這篇文章的讀者會(huì)是設(shè)計(jì)師……）

那么以上三種方案就是全部的解決方案了？別傻了，當(dāng)然不止。谷歌字體是最著名的免費(fèi)字體服務(wù)商，而TypeKit則是收費(fèi)字體服務(wù)商中最流行的，你要用心找還有大把的字體托管服務(wù)商可供選擇。

自托管字體

這是一種相對(duì)棘手的解決方案。因?yàn)檫@種方法的關(guān)鍵完全不在技術(shù)上，而是你得深入理解字體的授權(quán)和相關(guān)法律細(xì)節(jié)。

當(dāng)我們直接從用戶(hù)的機(jī)器上調(diào)用字體，或者使用托管字體的時(shí)候，我們完全不用考慮太多，幾行CSS代碼會(huì)解決所有的問(wèn)題。但是，當(dāng)我們要自己托管字體的時(shí)候，就需要明白使用字體的權(quán)限和相應(yīng)的授權(quán)細(xì)節(jié)了。

比較高端的玩兒法是你在寫(xiě)代碼的時(shí)候，告訴瀏覽器下載字體，并且告訴瀏覽器將去什么地方查找字體文件（或者多個(gè)版本的字體文件），然后告訴瀏覽器這些字體的名字分別是什么。同時(shí)也需要注意，這些字體的類(lèi)型。常見(jiàn)的字體格式是EOT、OTF、WOFF、TTF、SVG等。不同瀏覽器慣于處理的字體格式可能不一樣，所以最好你得準(zhǔn)備好多種不同的字體供不同瀏覽器下載。

所以，首先你要將你準(zhǔn)備好的字體文件轉(zhuǎn)化成多種不同格式的字體，比如，你準(zhǔn)備好一個(gè).ttf格式的字體，那么你需要將它轉(zhuǎn)化成.woff、.otf、.svg等格式的字體，然后你就可以設(shè)定下載文件的位置、調(diào)用字體的相關(guān)信息了。

令事情變得棘手的地方就在此了?？紤]到你提供給了世界上每個(gè)人從你網(wǎng)站上下載字體的機(jī)會(huì)，那么當(dāng)你將字體上傳到服務(wù)器的那一刻開(kāi)始，人們就可以肆無(wú)忌憚地將字體下載到他們的電腦上，分享給朋友甚至用到他們自己的網(wǎng)站上。這就是為什么很多字體開(kāi)發(fā)商不想讓他們的字體輕易用在網(wǎng)站上。

因此當(dāng)你需要下載一個(gè)用在自己的網(wǎng)站上的字體之時(shí)，你需要尋找授權(quán)可以用于網(wǎng)絡(luò)且免費(fèi)的字體（當(dāng)然，不是用于桌面的那種）。

FontSquirrel：這是一個(gè)我特喜歡的免費(fèi)字體網(wǎng)站，他們的首頁(yè)上有一些的超高質(zhì)量免費(fèi)字體，并且每個(gè)字體的字體許可都已經(jīng)明確地標(biāo)注了出來(lái)。
?
在FountSquirrel上還有另外一個(gè)超贊的工具，那就是WebFont生成器。你可以將單個(gè)字體文件上傳到生成器中，它會(huì)將其自動(dòng)轉(zhuǎn)化成你需要的其他字體，并且同時(shí)生成相應(yīng)的CSS代碼，可以供你直接插入到網(wǎng)站代碼中。只要格式允許，WebFont都能轉(zhuǎn)化，并不規(guī)定字體來(lái)源。

除了免費(fèi)字體，F(xiàn)ontSquirrel還賣(mài)有大量的字體是收費(fèi)的。

以下便是來(lái)自FontSquirrel的字體“Pacifico”在我們的Nomster上應(yīng)用的案例：
?
MyFont.com同樣會(huì)免費(fèi)提供少量字體（但是其他字體會(huì)收費(fèi)）的字體網(wǎng)站。當(dāng)你在這個(gè)網(wǎng)站中搜索自己要的字體的時(shí)候，會(huì)發(fā)現(xiàn)其中絕大多數(shù)的字體都是需要你付費(fèi)的，但是其中有些字體家族中特定粗細(xì)的字體是免費(fèi)提供的，一定要仔細(xì)篩選。如果你人品好，真的能淘到好字體。

最后，關(guān)于字體還有三件事情是需要了解的：

1、不同的字體會(huì)賦予網(wǎng)站截然不同的感覺(jué)，把握好字體的細(xì)節(jié)就能掌控好網(wǎng)站的感覺(jué)；

2、將字體加載到web應(yīng)用中的方法有一大把，仔細(xì)篩選一種符合自己的；

3、營(yíng)造專(zhuān)業(yè)和炫酷的呈現(xiàn)效果固然重要，但是網(wǎng)站的最終目的還是傳達(dá)信息，讓人閱讀的。所以在調(diào)整效果完之后，不妨猴退一步仔細(xì)審視一下，用戶(hù)能否讀到所有你寫(xiě)上去的文字。

我們專(zhuān)注高端建站，小程序開(kāi)發(fā)、軟件系統(tǒng)定制開(kāi)發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開(kāi)發(fā)、各類(lèi)API接口對(duì)接開(kāi)發(fā)等。十余年開(kāi)發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿(mǎn)意為止，多一次對(duì)比，一定讓您多一份收獲！