首先來看一則設(shè)計(jì)師和前端小白的日常,這是使用 Mac OS 的設(shè)計(jì)師給的效果圖
這是使用 Windows 開發(fā)的實(shí)際產(chǎn)品頁面
(PS: 以上截圖不代表網(wǎng)站真實(shí)面貌，僅為說明。)
真的是一圖勝千言??！沒看明白的話再來一張圖！
這張圖里的 Helvetica Neue Ultra Light 算是一個(gè)字體，而所列的這些字體都算是 Helvetica Neue 字族的字體。
一個(gè)字族需要滿足指定字符集 Unicode Table
這張 unicode 表分成了很多的 block，把某一類字符放在指定的 block 中，如下圖
西文字體比如 Helvetica 等，一定會(huì)完成拉丁文對(duì)應(yīng)的 block 中的字形，但是他們是不會(huì)去做 CJK（中日韓） 的字形。而特殊字符，比如表情符號(hào)等，也是有預(yù)留位置的，這也是為啥我們經(jīng)常發(fā)現(xiàn)別人發(fā)過來的一些東西是方塊，因?yàn)閷?duì)方發(fā)送的字符在我們自己的機(jī)器上并沒有相應(yīng)的字體來顯示。
這個(gè)就是大部分時(shí)候?qū)е略O(shè)計(jì)師效果圖和開發(fā)結(jié)果不一致的主要原因，設(shè)計(jì)師用著 Mac 上獨(dú)有的字體設(shè)計(jì)頁面，然后測(cè)試和產(chǎn)品經(jīng)理最終只在 windows 上查看頁面效果，自然就跟設(shè)計(jì)師效果圖不一致了。
Mac OS X 字體列表
, Windows 字體列表
, 開源字體列表
不管我們?nèi)粘Ｓ糜?jì)算機(jī)或者手機(jī)，閱讀的最多就是文字，而字體在這些設(shè)備上對(duì)于我們來說就像是空氣和水般的存在，但制作字體的過程并不輕松，尤其是中文字體，幾萬個(gè)字形不是幾十個(gè)拉丁字形所能相比的，往往需要字形設(shè)計(jì)師和工程師配合耗時(shí)幾年的時(shí)間來做，成本可想而知，所以商業(yè)公司字體的售價(jià)一般都比較貴，不過很多字體公司都提供個(gè)人非商用的免費(fèi)版本的字體。
如果設(shè)計(jì)師喜歡一款蘋果的字體，但是 windows 上沒有怎么辦？直接做成圖片嵌入到網(wǎng)頁里？
No！雖然字體在自己的機(jī)器上可以免費(fèi)使用（那是因?yàn)樘O果買的字體，你又買了蘋果的機(jī)器，其實(shí)你是買過單的，而不是吃霸王餐），但是如果商業(yè)產(chǎn)品里做成圖片給用戶看的話那就涉及到字體的知識(shí)產(chǎn)權(quán)，你需要另外購買，即使這款字體在你的計(jì)算機(jī)和手機(jī)上已經(jīng)有了。
方案一：使用相似字體作為替代方案，這個(gè)方案需要設(shè)計(jì)師對(duì)字體以及各個(gè)系統(tǒng)上的字體比較了解，當(dāng)然啦，現(xiàn)成工具是有噠！當(dāng)當(dāng)當(dāng)當(dāng)：請(qǐng)?jiān)?PC 上戳這里，這個(gè)網(wǎng)站提供了 Mac 和 Windows 上相似字體的替代方案。
不好意思，我是處女座！我要的不是相似，我要是 100% 相同！
好吧，其實(shí)，還有方案二：使用 Web Font 技術(shù)。不過依然還是要注意字體的知識(shí)產(chǎn)權(quán)問題，是付費(fèi)使用商業(yè)字體還是免費(fèi)的開源字體都任君挑選，但請(qǐng)不要隨意使用商業(yè)字體，免得找上門的麻煩。
《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)：平面設(shè)計(jì)、字體編排和空間設(shè)計(jì)的視覺傳達(dá)設(shè)計(jì)手冊(cè)》
---- 華麗的分割線 (以下為純技術(shù)內(nèi)容，設(shè)計(jì)師和產(chǎn)品經(jīng)理可以跳出了)----
字體的分類有很多種，可以參考這個(gè) Wiki Typeface
不過計(jì)算機(jī)上其實(shí)并沒有把種類分得那么細(xì)致，在 CSS 中有5個(gè)基本款
serif, sans-serif, monospace, cursive, fantasy.
serif 襯線字體，如 Big Caslon, 宋體
sans-serif 非襯線字體，如 Helvetica, 黑體
monospace 等寬字體，如 Menlo
cursive 手寫體，如 Comic Sans MS
fantasy 幻想體，如 Bodoni Ornaments
接下來我們來看一看 CSS 中字體的 Fallback 機(jī)制：
font-family: 'Helvetica Neue', 'Helvetica', 'Microsoft Yahei', sans-serif;這段 CSS 代碼中的字體的 Fallback 可以看下圖。
這個(gè) fallback 的規(guī)則可以總結(jié)為
(hasFont && isInUnicodeTable) ? 'Current Font' : 'Next Font'就這樣一直找匹配的字體，直到系統(tǒng)默認(rèn)，所以一般都把系統(tǒng)默認(rèn)的5類字體放到 font-family 定義的最后來寫。
那么一個(gè)國際化的站點(diǎn)應(yīng)該如何設(shè)置多語種的字體呢？其先后順序如何設(shè)定？這里強(qiáng)烈推薦 Airbnb 作為參考。
[lang="ja"] body{ font-family:"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","MS Gothic”, "ＭＳ ゴシック","Helvetica Neue”,Helvetica,Arial, sans-serif !important}[lang="ko"] body{ font-family:"?? ??","Nanum Gothic","?? ??","Malgun Gothic”, "Apple Gothic","??",Dotum,"Helvetica Neue”,Helvetica, Arial,sans-serif !important}[lang^="zh"] body{ font-family:"Hiragino Sans GB”,"華文細(xì)黑","STHeiti","微軟雅黑", "Microsoft YaHei",SimHei,"Helvetica Neue”,Helvetica,Arial, sans-serif !important}Web Font 技術(shù)的出現(xiàn)使得用戶不安裝網(wǎng)頁指定的字體也可以獲得同樣的顯示效果成為可能。
WebFont 技術(shù)支持的常見文件格式有以下幾種：
EOT, TTF/OTF, WOFF, WOFF2, SVG
為嘛有這么多格式呢，當(dāng)然是各家瀏覽器干得好事了@_@, 大家可以到 caniuse.com 上去查各個(gè)格式的兼容情況。
好了，既然知道兼容情況了，那么就比較好理解 web font 的 css 的通用寫法了
// Syntax@font-face { font-family: <font-name>; src: <local/url> <format>,[…]; font-weight: <font-weight>; font-style: <font-style>; font-stretch: <font-stretch>; unicode-range:<unicode-range>;}// Examples@font-face { font-family:’Helvetica’; src: url(fonts/Helvetica-Regular.eot?#iefix) format(‘eot’), url(fonts/Helvetica-Regular.woff2) format(‘woff2’), url(fonts/Helvetica-Regular.woff) format(‘woff’), url(fonts/Helvetica-Regular.ttf) format(‘truetype’); font-weight: 400;}@font-face { font-family:’Helvetica’; src: url(fonts/Helvetica-Bd.eot?#iefix) format(‘eot’), url(fonts/Helvetica-Bd.woff2) format(‘woff2’), url(fonts/Helvetica-Bd.woff) format(‘woff’), url(fonts/Helvetica-Bd.ttf) format(‘truetype’); font-weight: 700;}.text { font-family: 'Helvetica';}.text .text-normal { font-weight: 400;}.text .text-bold { font-weight: 700;}咦，svg 格式上哪兒去了呀？svg font 的問題在于文件體積很大，有時(shí)甚至超過原始的 TTF/OTF 字體文件。Chrome 從 38 開始就不支持 svg font 了，目前主流瀏覽器還支持 svg font 的就只有 iOS Safari(9.3), Blackberry Browser(10), Opera Mobile(37) 和 UC Broswer for Android(9.9) 了。但是這些瀏覽器都支持文件體積更小的 WOFF 格式的 web font。所以不做 svg 文件完全沒有問題，WOFF 足以勝任。
為什么 src 中的第一個(gè) url 看起來如此奇怪，有個(gè)? 呢? 那就是 IE8 的問題了，此君文化水平較差，不認(rèn)識(shí) format 這位先生，所以就只能使用 hack 技巧把文件名之后的文字都變?yōu)閡rl的參數(shù)讓笨笨的 IE8 直接忽略就好了。至于 #iefix 加不加就看客官你的喜好了。恩，話說這個(gè)笨笨的 IE8 還有一個(gè)缺陷就是相同 font-family 的@font-face 定義最多只能識(shí)別 4 個(gè)，也就是說如果你有 4 種以上字重對(duì)應(yīng)同一個(gè) font-family 的情況的話，請(qǐng)你給剩下的字重起另外一個(gè) font-family 名字吧。。。
說了這么多，這幾種格式的文件要怎么生成呢？首先你得有字體的 TTF 或者 OTF 文件，簡而言之，你必須先擁有目標(biāo)字體可以安裝在計(jì)算機(jī)上的這種格式的文件，然后使用 fontmin 來生成 EOT, WOFF 格式的文件，使用 ttf2woff2 來生成 WOFF2 格式的文件。這樣文件格式就齊全啦。
但是，你是不是覺得太繁瑣了？啊，好吧，你可以用谷歌的字體服務(wù)，什么？連不上呀 T_T，要不嘗試一下 360 的字體庫吧，哎呀？偶爾也有問題？佛曰，繁瑣的也許靠譜，容易的也許不穩(wěn)定，施主請(qǐng)自便。
字體文件的加載需要時(shí)間，各個(gè)瀏覽器對(duì)于字體加載渲染的過程也不同。
Safari 不會(huì)渲染文字直到 webfont 加載完畢.
Chrome and Firefox 會(huì)等待 webfont 加載，如果 3 秒鐘以內(nèi)不能完成，那么會(huì)使用備用字體渲染文字，在webfont 加載完成之后重新渲染文字。
IE 會(huì)立即使用備用字體渲染文字，當(dāng) webfont 加載完成之后重新渲染文字。
為了保證良好一致的用戶體驗(yàn)，我們需要統(tǒng)一這個(gè)行為模式。你需要 webfontloader, 除了提供常用的第三方字體加載方式之外，最主要的功能是可以判斷字體加載的各個(gè)階段并賦予相應(yīng)的 CSS 類來控制目標(biāo)內(nèi)容的樣式。
html.wf-loading { visibility: hidden;}html.wf-active,html.wf-inactive { visibility: visible;}上面這段代碼很容易閱讀，即在字體加載時(shí)隱藏 html 內(nèi)容，加載完成或失敗時(shí)顯示。
參考：Google Webfont optimization
加載和渲染問題解決了，那么中文字怎么辦？網(wǎng)站也不會(huì)把幾萬個(gè)中文字符都用到，我們只需要顯示其中的一小部分字而已，需要下載動(dòng)則好幾 MB 大小的中文字體么？
鐺鐺鐺鐺，輪到 Font Spider 登場了，字蛛俠可以幫助我們只把需要的中文字符做成 webfont 文件，解決了令人頭大的文件大小問題。
當(dāng)然了，你也可以使用一些在線的 subset 服務(wù)，例如 typesquare 等，也是不錯(cuò)的。
（完）
你可能會(huì)感興趣的文章：
聯(lián)系客服
