更新時間：2025-09-16 13:21:32
網站建設
548我曾與一位視覺設計師合作開發Web 應用程序。他提交給我的設計稿看起來非常令人印象深刻，所以我根據他的設計稿用HTML 和CSS 編寫了Web 應用程序。你知道當我認為一切都完成并匆忙向他展示產品時他說了什么嗎？
“你都做錯了。”
的確。我沒有按照他的模型使用字體，他為此專門叫我出來并告訴我這是一個巨大的錯誤。我該如何彌補？
“我不知道。但毫無疑問，這是目前最大的問題。”
說起來，在過去很長一段時間里，我和不同的網頁設計師一起開發過各種網站，這讓我逐漸開始關注網頁設計中許多小而重要的細節，比如字體。
這里可以簡單介紹一點背景知識。目前，大多數網站都是基于HTML和CSS開發的。如果你沒有網站開發的經驗，也許你需要找一個HTMLCSS的介紹視頻來學習，比如1小時創建一個體驗不錯的個人網站頁面。教程。
以下是我的視覺設計師教給我的字體知識。字體規格
改變某一種文字的字體樣式最簡單的方法就是改變CSS的Font-family屬性。然后，瀏覽器會直接讀取用戶電腦上的字體。想必每個網站開發人員都明白這一點。一般來說，網站建設外包常用的安全字體一共有12種。除了比較特殊的Comic Sans之外，還有11種字體可以在大多數類型的網站上自由使用。
如果你的眼睛只盯著這十幾個字體，那就太局限了。如果你足夠敏銳，你會有意識地調整字體的粗線（淺色、普通、粗體）和字間距，以追求更好的效果。例如，當您在導航欄中使用超粗體字體時，緊湊的字體間距會使您的網站看起來更專業。反之，如果使用極細的字體，網頁會有一種非常銳利、清晰的感覺。
字體的另一個技巧是在CSS 中為字體添加font-shadow 屬性。
在以下示例中，字體系列設置為Helvetica，字體粗細設置為Extra Thin。
這種字體的一個例子來自我們的網絡應用程序Nomster。字體棧
當你指定使用什么字體時，你可以根據重要性設置一個順序，優先級越高，優先級越高。當設備中沒有排名最高的字體時，系統會自動調用排名最低的字體。這就是為什么Windows和Mac內置的字體不一樣，但最終都能調用合適的字體，正常顯示網頁內容的原因。對于此字體堆棧設置，以下工具/網站應該可以幫助您：
CSS Tricks Font Stacks：這是一個包含8種不同字體的字體庫，直接從CSS Tricks中抓取這個字體庫，你的網站字體效果絕對不會像1995年以前的網站那么殘廢。
CSSFontStack.com：一個提供各種字體棧的網站，超過40種不同的字體棧供你選擇~
當然，如果你通過谷歌和百度搜索，應該可以找到更多的字體棧。
以下用例也來自我們的網絡應用程序Nomster。它使用的字體堆棧也是我們最喜歡的，因為它確實提高了網站的可讀性。
加載特定字體
在Web 應用程序中使用特定的字體來顯示文本是非常可行的。你不必找一個“長得像”的字體湊合，因為下面的方法可以幫助你直接使用你喜歡的字體：字體托管服務
將通用字體加載到網站中確實需要一點技巧。字體托管服務可以為您做到這一點，有些是免費的，有些是收費的。
Google web Fonts：Google的字體服務還是很靠譜的，集成了很多優質的網絡字體供你調入你的網站。按照Google 的官方說明，您可以輕松地在您的Web 應用程序中調用這些字體。
當您想在您的網站中使用Garamon 時
d這個字體的時候，你如果使用字體棧來調用的話，可能會因為瀏覽器差異而無法正常使用，也可能因為本地字體而顯示不正常，而使用谷歌字體中的“EB Garamond”則不存在這樣的問題，它不會調用本地字庫，而且大家電腦里面顯示也會完全一樣。?
谷歌字體服務是免費而易用的，并且會讓不同的系統不同的瀏覽器都保持一致的體驗，那為什么會有人考慮其他的方案呢？原因很簡單。谷歌字體平臺所收錄的字體多數是相對更開放甚至是直接開源的字體，但是有很多殺手級字體的開發商并不愿意這么做。作為商品出售字體可以給這些開發商帶來更大的利益，這使得你無法在谷歌字體平臺上找到它們。當然，這個問題也是可以解決的。
TypeKit ：這個字體網站也是耳熟能詳的大站。其中囊括了很多品質優秀的好字體，但是相信我，你看了會后悔的。為什么這么說？那些看起來優秀的字體并不便宜！基礎的服務需要每年上交25美元，而高級版的每年需要交100美元！當然，如果不差錢的話，選擇TypeKit也不錯~
所以，最好不要告訴與你合作的設計師，否則他們會逼著你整套整套得買字體的！（突然意識到這篇文章的讀者會是設計師……）
那么以上三種方案就是全部的解決方案了？別傻了，當然不止。谷歌字體是最著名的免費字體服務商，而TypeKit則是收費字體服務商中最流行的，你要用心找還有大把的字體托管服務商可供選擇。
自托管字體
這是一種相對棘手的解決方案。因為這種方法的關鍵完全不在技術上，而是你得深入理解字體的授權和相關法律細節。
當我們直接從用戶的機器上調用字體，或者使用托管字體的時候，我們完全不用考慮太多，幾行CSS代碼會解決所有的問題。但是，當我們要自己托管字體的時候，就需要明白使用字體的權限和相應的授權細節了。
比較高端的玩兒法是你在寫代碼的時候，告訴瀏覽器下載字體，并且告訴瀏覽器將去什么地方查找字體文件（或者多個版本的字體文件），然后告訴瀏覽器這些字體的名字分別是什么。同時也需要注意，這些字體的類型。常見的字體格式是EOT、OTF、WOFF、TTF、SVG等。不同瀏覽器慣于處理的字體格式可能不一樣，所以最好你得準備好多種不同的字體供不同瀏覽器下載。
所以，首先你要將你準備好的字體文件轉化成多種不同格式的字體，比如，你準備好一個.ttf格式的字體，那么你需要將它轉化成.woff、.otf、.svg等格式的字體，然后你就可以設定下載文件的位置、調用字體的相關信息了。
令事情變得棘手的地方就在此了。考慮到你提供給了世界上每個人從你網站上下載字體的機會，那么當你將字體上傳到服務器的那一刻開始，人們就可以肆無忌憚地將字體下載到他們的電腦上，分享給朋友甚至用到他們自己的網站上。這就是為什么很多字體開發商不想讓他們的字體輕易用在網站上。
因此當你需要下載一個用在自己的網站上的字體之時，你需要尋找授權可以用于網絡且免費的字體（當然，不是用于桌面的那種）。
FontSquirrel：這是一個我特喜歡的免費字體網站，他們的首頁上有一些的超高質量免費字體，并且每個字體的字體許可都已經明確地標注了出來。
?
在FountSquirrel上還有另外一個超贊的工具，那就是WebFont生成器。你可以將單個字體文件上傳到生成器中，它會將其自動轉化成你需要的其他字體，并且同時生成相應的CSS代碼，可以供你直接插入到網站代碼中。只要格式允許，WebFont都能轉化，并不規定字體來源。
除了免費字體，FontSquirrel還賣有大量的字體是收費的。
以下便是來自FontSquirrel的字體“Pacifico”在我們的Nomster上應用的案例：
?
MyFont.com同樣會免費提供少量字體（但是其他字體會收費）的字體網站。當你在這個網站中搜索自己要的字體的時候，會發現其中絕大多數的字體都是需要你付費的，但是其中有些字體家族中特定粗細的字體是免費提供的，一定要仔細篩選。如果你人品好，真的能淘到好字體。
最后，關于字體還有三件事情是需要了解的：
1、不同的字體會賦予網站截然不同的感覺，把握好字體的細節就能掌控好網站的感覺；
2、將字體加載到web應用中的方法有一大把，仔細篩選一種符合自己的；
3、營造專業和炫酷的呈現效果固然重要，但是網站的最終目的還是傳達信息，讓人閱讀的。所以在調整效果完之后，不妨猴退一步仔細審視一下，用戶能否讀到所有你寫上去的文字。
我們專注高端建站，小程序開發、軟件系統定制開發、BUG修復、物聯網開發、各類API接口對接開發等。十余年開發經驗，每一個項目承諾做到滿意為止，多一次對比，一定讓您多一份收獲！
