整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
端需要考慮性能的同時還原設計（字體），如果 100% 還原那就只能用圖片了。如果考慮頁面兼容性和性能，需要做一定的妥協。（設計師體諒體諒前端吧）
1. 兼容性
windows/OSX
IE 8 及以上/Chrome/Safari/360/獵豹/QQ/Firefox/Opera 等...
Retina Display
2. 鋸齒是個大問題
html 僅表達 12-16px 的字體，windows 渲染 12-16px 鋸齒最小，看起來很整齊的樣子。16px 以上鋸齒大到沒朋友，所以 16px 以上的字都用圖片表達。
web 上反對使用「微軟雅黑」，字與字之間的間距過小使閱讀起來極其困難，這尼瑪不能忍啊。之前合作過的設計師酷愛微軟雅黑，但 web 上渲染出來跟 Photoshop 上的完全沒法比。
windows 下「宋體」其實沒那么丑。
3. 選擇一個合適的英文字體
英文字體數不過來的多，有瘦的、胖的、圓的、銳利的等... 在合適的場合用合適的字體就好。
如果你希望英文不要搶風頭，比較瘦的 hevetica 系列比較合適。如果你希望圓滑清晰一點 lucida 系列比較合適。如果是演示代碼，menlo 等字體也很清晰。
選擇的英文字體合適還是不合適，現場是檢驗設計的唯一標準。把字體寫進頁面里，看看效果好不好，是不是對齊、漂亮、兼容性好，喜歡就好。
4. 前后順序
font-family: "Lucida Grande", Lucida Sans Unicode, Hiragino Sans GB, WenQuanYi Micro Hei, Verdana, Aril, sans-serif;
font-family 先寫英文后寫中文，這樣先渲染英文的英文，后渲染中文的中文。如果先寫中文，則會渲染中文的英文和中文的中文。
我把 Hiragino Sans GB 寫在 verdana 之前，是為了如果 lucida 系列渲染不出來，希望在 OSX 先渲染冬青黑的英文，而不是先渲染 verdana 和 aril。
5. 細節還是要注意的啦
-webkit-font-smoothing: antialiased;
參考1：-webkit-font-smoothing
參考2：mac下網頁中文字體優化前端觀察
6. 有點規范也是好的
#000 #333 #666 #999 #ccc #eee
黑白色系多用一些安全色，讓前端開發的時候省了很多事情，而且渲染結果也不錯的啊。要說安全色不夠還原設計，那只能說設計師水平不行啊。
為一名設計師，你需要學到的最重要的技能之一就是如何選擇字體。這是因為文字內容是設計師與用戶溝通的主要方式之一，版式可以決定設計的成敗。
排版工作兼具美感和復雜性，有些人把自己整個職業生涯都獻給了字體設計。幸運的是，他們的工作都以文檔的形式，很好的記錄了來，讓我們在設計時，有大量的資源可以學習。
本文旨在幫助你學習如何選擇正確的字體類型。同時，也鼓勵大家去探索那些你自己熟悉的字體組合。
在做任何事情之前，首先都需要確定設計的目標。你想傳達的信息是什么？你設計的媒介又是什么？
好的設計，會利用好版式并與目標達成一致。這是因為版式在你的設計中是表達情緒、基調和風格的關鍵。
例如：如果你設計的賀卡是走很重的插畫風，那么選擇一款合適的插畫風格字體就很關鍵。合適的字體風格要與整體的設計調性保持一致。
選擇合適的插圖風格字體
如果你正在設計一個以圖片為核心的登陸頁面，選擇一個不喧賓奪主的簡單字體就很關鍵。使用字體作為一種來強化信息傳達的方式。
如果圖片是設計的重點，那么選擇簡單的字體，圖片就會更加突出。
在確定設計目標之后，接著需要確定目標用戶。這一步很關鍵，因為有關用戶的信息，如：年齡、興趣和文化素養，會直接影響到字體的選擇。
例如：有些字體更適合給兒童設計時使用。在閱讀時，孩子們需要字跡清晰，字型大方的字體。Sassoon Primary就是一個不錯的例子，Sassoon Primary是由Rosemary Sassoon開發的，正是基于她對兒童容易閱讀字體的研究。
Rosemary Sassoon開發了Sassoon Primary字體
有些字體更適合老人，Senior-friendly字體有更加易讀的尺寸，對比度也足夠高，同時也避免了復雜的裝飾性筆跡。
在選擇字體時，要考慮到你的讀者和他們的需求。簡單來說，需要與你的用戶共情。
多看看其他設計師的優秀作品，試著去理解他們是如何選擇字體的。
對于字體設計的靈感，CreativeBloq的《75種最好的免費字體》就是一篇非常棒的文章，可以讓你正確地選擇字體。在那篇文章中，CreativeBloq解釋了每種字體背后的玄機。
另一個有用的資源是Awwwards在2015年發布的《100個最全的免費字體合集》。Invision 也編制了一個版式字體合集，你也可以在那里找到很多靈感資源。
Typ.io 收錄了大量已上線的字體案例資源(http://typ.io/)
想從實際線上網站獲得靈感，type.io這個網站會非常適合。這個網站從網上收集到了大量的字體設計案例，另外，網站中還在每個案例底部提供了css的字體樣式。
除了尋找專門的字體網站，也可以去查看你最喜歡的網站，看看他們是如何使用好字體的。“WhatTheFont”是一個很好的工具，它是一個Chrome擴展插件，只需要懸停在網頁中你希望了解的字體上，就能準確知道它的字體屬性了。
（譯者注：親自試驗了，能很方便的查字體了，有個地方要注意的是，必須等網站加載完成了，點擊那個插件圖標才有效果哦。）
除了單個字體，還要看看字體搭配的靈感。合適的字體組合和字體本身一樣重要，良好的字體組合有助于建立視覺層級，提高設計的可讀性。
字體組合和字體本身一樣重要
要獲得靈感，可以從Typewolf（https://www.typewolf.com/）開始。Typewolf收錄了大量來自不同網站的字體組合靈感。除此之外，他們還有字體推薦和高級排版指導，簡直就是版式創作者們的寶庫。
FontPair (http://fontpair.co/）還專門為谷歌字體設計了字體搭配靈感。你可以按字體類型組合進行排序，例如：無襯線字體和襯線字體或者襯線字體和襯線字體。
最后，在網上可以找到大量由設計師設計的字體組合。例如：《 Typography: Google Fonts Combinations》和《Typography: Google Fonts Combinations – Volume 2》，只需要在Dribbble和Behance上搜索“font pairing”即可找到。
有了前面的研究和靈感，你就可以選擇自己喜歡的字體了。在選擇字體時，有三個原則需要記住：可讀性、易讀性和目標。
在選擇字體之前，先研究一下產品目標
選擇常規且易于閱讀的字體，要盡量避免一些裝飾性的字體。同時，還要注意到字體的用途。比如：一些字體更適合作為標題而不是正文。
因此，在選擇字體之前，先研究一下它的預期使用目標。
搭配對比更大的字體
在字體組合方面，保持簡單原則，在一個頁面中最多使用三種不同的字體。此外，字體的組合需要有明確的對比，這樣會有助于引導讀者的眼睛，首先應該是標題然后才是正文。同時，你還可以使用不同的字體大小，顏色和字重來完善視覺對比。
對于web字體來說，你可以去使用谷歌字體、Typekit和Font Squirrel。谷歌字體是免費的，而Typekit和Font Squirrel提供了免費和付費的字體。
確定字體組合后的下一步是確定字體大小。這方面有一個很好的工具，是由Adobe版式主管Tim Brown設計的模塊化縮放工具。模塊化比例是一種用來識別過往令人滿意的搭配比例，以確定字體大小組合的系統。
模塊化比例是一個系統，用來識別歷史上令人滿意的比例，以創建規范來確定字體大小（https://www.modularscale.com/）。比如：你可以使用基于黃金分割的比例。
以下就是按比例算的前5個字體大小：
Golden Ratio (1:1.618)1.000 x 1.618 = 1.6181.618 x 1.618 = 2.6182.618 x 1.618 = 4.2364.236 x 1.618 = 6.8546.854 x 1.618 = 11.089
到后面，你可能會遇到一個問題就是基于黃金分割的比例有點太大了。
Golden Ratio (1:1.618)…11.089 x 1.618 = 17.94217.942 x 1.618 = 29.0329.030 x 1.618 = 46.97146.971 x 1.618 = 75.99975.999 x 1.618 = 122.966
如你所見，數字之間的間隔變得太大了。對于大多數的界面來說，需要更小的間隔。值得慶幸的是，模塊化比例有多種基于幾何，自然和音樂的比例。
Minor Second 15:16 Major Second 8:9Minor Third 5:6Major Third 4:5…
因此，如果不能使用黃金分割比例，也可以使用一個間隔更小的比例，比如：完美的“第四比例”。
Perfect Fourth (3:4)…9.969 x 1.333 = 13.28813.288 x 1.333 = 17.71317.713 x 1.333 = 23.61223.612 x 1.333 = 31.47531.475 x 1.333 = 41.95641.956 x 1.333 = 55.927
一旦確定了比例，就可以從列表中選擇字體大小，四舍五入到最近的整數大小。
Font SizesHeader 1: 55pxHeader 2: 42pxHeader 3: 31pxHeader 4: 24pxHeader 5: 14pxBody: 17pxCaption: 14px
模塊化比例的方式是利用了數學知識來精確生成字體大小。然后，這只能是作為一個參考，用這個方法作為起點，最終還是需要以你的眼睛來做適當的調整。
最后一步是為版式創建一套字體規范，用來對整體設計進行標準化。
在sketch中設置字體共享樣式
在像sketch這樣的軟件中，可以創建共享樣式文本用來快速標準化的使用字體。在這個過程中，你還可以調整和確定文本的屬性，比如顏色，字重和大小。在選擇字體顏色時，需要記住一句話：字體顏色與標準色需要協調一致。
使用規范來保證設計的一致性
在設計規范中，確保至少要包括以下幾個內容：字體定義、字體大小、字體顏色和示例用法。
谷歌的字體規范（https://material.io/guidelines/style/typography.html）是一個很好的例子。
其他的一些優秀案例包括 ：
版式設計是需要親自實踐才能很好掌握的，它是一門科學，也是一門藝術。
我期待你去打破你的舒適區，去探索屬于你自己的字體設計經驗。
作者：Jonathan Z. White
原文：https://medium.freecodecamp.org/typography-can-make-your-design-or-break-it-7be710aadcfe
譯者：彩云Sky，公眾號：彩云譯設計
本文由 @彩云Sky 翻譯發布于人人都是產品經理。未經許可，禁止轉載
題圖作者提供
前，瀏覽器只能展示本地安裝的字體。如果字體未安裝，網頁顯示效果會大打折扣。
為了解決這個問題，CSS 引入 web 字體，允許瀏覽器從服務器下載字體，下載完成后再重新渲染字體。
使用 web 字體前，需要了解常用的字體文件格式。
TTF 字體文件，即 TrueType 字體，是由蘋果和微軟在 20 世紀 80 年代末開發的字體標準。它是 macOS 和 Windows 操作系統使用最廣泛的字體格式。
OTF 字體文件，即 OpenType 字體，是一種可縮放的計算機字體格式。它建立在 TrueType 基礎上，是微軟的注冊商標。OpenType 字體目前在主要的計算機平臺上廣泛使用。
WOFF 字體文件，即 The Web Open Font Format 字體，是一種用于網頁的字體格式，2009 年開發，如今是 W3C（萬維網聯盟）的推薦標準。WOFF 本質是 OpenType 或 TrueType 字體，但是經過壓縮并附加額外的元數據。在帶寬受限的網絡中，WOFF 能更好的支持從服務器到客戶端的字體傳輸。
WOFF 2.0 字體文件，相比于 WOFF，提供了更高的壓縮效率。
SVG 字體，將 SVG 用作顯示文本時的字形。SVG 1.1 規范定義了一個字體規范，允許在 SVG 文檔中創建字體。
EOT 字體文件，即 Embedded OpenType Fonts 文件，是微軟設計的一種用于網頁的嵌入式字體，它是 OpenType 字體的緊湊形式。
不同字體格式的瀏覽器兼容性下圖所示：
不同字體格式的瀏覽器兼容性，截圖數據來自 w3schools.com
使用 @font-face CSS 指令定義自定義字體。使用前需要把字體文件放在服務器目錄，然后定義新的字體名稱，并指向字體所在位置。
以京華老宋體為例，這是一款可以免費商用的中文字體。下載字體文件后，放到和 index.html 同級的目錄，重命名為 jh-song.ttf。
下載字體文件
在 @font-face 指令內，使用 font-family 定義字體名稱，src 屬性定義字體文件路徑。
定義 web 字體
然后，像使用普通字體一樣，使用自定義字體樣式：
使用 web 字體
完
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
