超贊！最佳WEB字體排版實踐的簡明指導手冊

betsey：本文是站在一個網頁設計師的角度，所寫的關于最佳字體排版實踐的手冊，包括字體排版設計、Web 字體、Web 樣式指導等四個方面，而且每一章后都有擴展閱讀幫你深入了解細節，全程高能干貨，建議閱讀。

目錄

  1. 簡介
  2. 字體排版設計
    • 視覺層次
    • 字體排版中的格式塔原則
  3. 字體
    • 選擇字體
    • 使用web字體
    • 字體加載
    • OpenType的特性
  4. Web 樣式指導
    • 相對大小
    • 容器
    • 字體尺寸
    • 垂直間隔
    • 顏色
    • 下劃線
  5. 總結

簡介

字體排版絕不僅僅是使用字體那么簡單，它包括了關于文字"看上去會是怎么樣？"的所有事情——例如文字的大小，行高，顏色甚至文字間留白這樣的細枝末節的小事。一個好的文字排版會為你所寫的內容定下情感基調，并且可以幫助讀者更好的理解其內容和語境。

為了讓你使用起來更像是在看一本參考書而不是說明書，本文將會非常精簡清晰，如果你想進一步的了解更多細節，可以點擊查看在每一章中的"擴展閱讀"去深入了解。

這本手冊將會在GitHub上開源，并且會持續更新一些最佳實踐的范例，希望你們喜歡！

字體排版設計

視覺層次

視覺層次是一種理念，它意在傳達頁面中的元素應該依照其重要性進行組織排版，以便讀者可以很容易的通覽整個頁面，找到相關的內容。一個好的視覺層次可以引導讀者在閱讀時候的視覺流向。視覺層次被廣泛運用于文字排版中，它構成了文字排版設計的理論基石。

請看下圖的"愛麗絲夢游仙境"的字體排版設計，它展現了一個清晰的視覺層次：

超贊！最佳WEB字體排版實踐的簡明指導手冊

點擊這里 查看網頁上的實際效果

視覺層次可以被分成以下4個部分：

  1. 字體大小 & 字體重量： 設置字體大小和字體重量是兩種構建視覺層次的最簡單的方式。他們可以很容易地告訴讀者什么地方是最重要的，引導讀者的目光落到這里的內容上來。只是簡單地為文字加上這兩種樣式，文章的重點便一目了然了。
  2. 定位： 元素定位是另外的一種構建視覺層次的方式，就像上圖中，文章的標題和作者信息通過置頂和居中表明了它們的重要性。
  3. 字體： 通過使用有對比度的字體可以提高不同元素之間的辨識度，從而構建視覺層次
  4. 顏色： 為重要的文字設置不同的顏色也是一種非常簡單的構建視覺層次的方式。然而使用這種方式的時候一定要小心，因為顏色的濫用可能會造成重點部分辨識度的降低。

擴展閱讀：

字體排版中的格式塔原則

格式塔原則， 或格式塔法則， 是一種構建感性認知的規律。當我們觀察這個世界的時候，我們通常會意識到，一個復雜的場景是由多個在某些背景之上的物體構成的，而這些物體則是由更小的一些物體構成的，依此循環下去。

在字體排版中我們需要理解的兩個很重要的格式塔原則就是"距離原則"和"相似原則"。.

距離原則

為了更好地掌握元素定位的方法，了解距離原則是很重要的。距離原則表明，人們會將靠得近的物體視為有關聯的物體，反之，隔得比較遠的物體將會被看成屬于不同類別。

超贊！最佳WEB字體排版實踐的簡明指導手冊

點擊此處查看原圖

在字體排版設計中，"距離"指的是通過設置行高、內間距和外間距所制造出來的留白空間。在兩段不同的段落之間應該留有明顯的并且易于區分的留白間隔，請看下面的例子：

超贊！最佳WEB字體排版實踐的簡明指導手冊

注意啦，你覺得應該把內容相關的部分都擠到一個很小的空間中去嗎？當然不是這樣，自由隨意的留白也是很重要的。距離原則告訴我們，只需要為那些沒有關系的段落之間額外的加上一些易于區分的留白就可以了

相似原則

格式塔的相似原則告訴大家，看起來很像的東西會被認為是一類的東西。舉個例子，如果所有可點擊的文字被設置為天藍色，那么讀者就會認為文章中所有天藍色的文字內容都是可以點擊的。

在字體排版中，相似原則就意味著，擁有同樣功能的元素應該在樣式上保持一致。如果兩組元素的功能相似的話，那么它們也應該看起來很像才對。例如，兩篇同為博客帖子的文章應該看起來很像。而相反的，兩個功能不相同的元素也應該看起來不像。

擴展閱讀：

字體

選擇字體

選擇字體是一個具有創造性和情感的過程。不同的字體可以傳達不同的情感，你可以盡情挑選一個合適的字體讓你的文字感情變得豐沛起來。

  • 首先為你的文字的正文挑選一個合適的字體，當你需要搭配不同字體的時候，記得要保持正文字體的不變，然后試著依據這個字體選擇和它相搭配的其他字體。
  • 使用一些例如TypeTester 和 TypeCast 這一類的工具會讓你進行字體選擇的時候輕松一些。
  • 從他人處獲得靈感! Fonts In Use提供了大量的優秀的字體搭配范例。
  • 有些字體本來就是為用作大標題而設計的，而有些字體天生就只適合那些小屏幕，你要依照每個字體的"天性"去使用它們。你可以在WebType 上面找到對于不同字體而言合適的尺寸。此外 TypeKit也標明了其上的字體是適合標題或者是正文。

擴展閱讀：

使用web字體

我們使用以下的格式來聲明引入的web字體文件：

@font-face {
  font-family： 'Helvetica Neue';
  src： url('/assets/fonts/HelveticaNeue-Light.eot');
  src： url('/assets/fonts/HelveticaNeue-Light.eot?#iefix') format('embedded-opentype')，
    url('/assets/fonts/HelveticaNeue-Light.woff2') format('woff2')，
    url('/assets/fonts/HelveticaNeue-Light.woff') format('woff')，
    url('/assets/fonts/HelveticaNeue-Light.ttf') format('truetype');
  font-weight： 300;
  font-style： normal;
}

@font-face {
  font-family： 'Helvetica Neue';
  src： url('/assets/fonts/HelveticaNeue-Bold.eot');
  src： url('/assets/fonts/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype')，
    url('/assets/fonts/HelveticaNeue-Bold.woff2') format('woff2')，
    url('/assets/fonts/HelveticaNeue-Bold.woff') format('woff')，
    url('/assets/fonts/HelveticaNeue-Bold.ttf') format('truetype');
  font-weight： bold;
  font-style： normal;
}

@font-face {
  font-family： 'Helvetica Neue';
  src： url('/assets/fonts/HelveticaNeue.eot');
  src： url('/assets/fonts/HelveticaNeue.eot?#iefix') format('embedded-opentype')，
    url('/assets/fonts/HelveticaNeue.woff2') format('woff2')，
    url('/assets/fonts/HelveticaNeue.woff') format('woff')，
    url('/assets/fonts/HelveticaNeue.ttf') format('truetype');
  font-weight： normal;
  font-style： normal;
}

為了達到最大程度上的兼容，我們建議使用上面列出的格式。或者，只使用 woff2 和 woff也會支持大部分的現代瀏覽器。

你需要為每個列出來的格式提供一個相應的字體文件。推薦使用 Transfonter 或者，這樣你就可以在只有一個字體文件的情況下，將其轉換成不同的文件格式。

盡可能的壓縮你的字體文件。 點擊這里 查看更多信息。

將多個同源字體文件（細體、常規、半粗體、粗體等等）合并成一個font-family， 盡量不要為每個字體都起一個新的font-family的名字。

或者，你也可以通過線上字體資源服務，如Google Fonts 或者 Typekit引入你想要的字體。

擴展閱讀：

加載字體

在你引入的字體被渲染出來之前，他們需要先進行加載。下面是三種在加載的時候可能會發生的事情：

  1. 引入的字體沒有被識別出來，字體應用了備用字體。
  2. 引入的字體雖然被識別出來但是沒有加載，他需要在下載完成之后才會被應用。
  3. 引入的字體被成功識別并迅速應用。

場景1只發生在你嘗試使用一個不存在的字體，或者聲明時候的src指向了一個壞鏈， 這種情況可以并且應該徹底避免。接著我們跳到場景3，這種情況通常在字體被正確的緩存的時候發生，也是我們喜聞樂見的。場景2中包含著字體加載的過程，字體加載通常是難以避免的（至少是在第一次請求的時候），下面是幾種處理方式：

1. 文檔樣式閃爍方案 （FOUT）

FOUT是指網頁會在切換到合適的網頁字體之前，使用默認或者備選字體顯示文字。這種情況的出現是因為只有當HTML和CSS都被下載完成之后，字體請求才會發出。這就意味著，在HTML被顯示出來而字體文件沒有被完全下載下來中間存在著一段"空檔"時間。 FOUT 算是對大部分的網頁而言的最佳選擇，主要是其他的選擇也許更糟。如果使用得到的話，FOUT 很難被用戶察覺出來。

2. 不可見文本閃爍方案（FOIT）

很多年前，一些現代瀏覽器開始使用一種新的技術來處理字體加載的問題 — FOIT. FOIT是指當瀏覽器檢測到字體正在加載的時候，隱藏應用這段字體的文字，直到字體完全下載完才將其顯示出來。 然而我們應該避免這種做法雖然這樣做從理論上看起來還不錯，但是這會帶給那些網絡速度比較差的用戶十分糟糕的體驗。有可能會在最初的FOIT后出現FOUT， 最壞的情況可能會是這段文字將永遠看不到了。

3. 白屏方案

即在字體加載完成之前，整個網頁都處于不可見的狀態，或者也可以采用顯示一個進度條.我們只推薦當FOUT 嚴重影響用戶體驗的時候使用這種方法。 我們通常在一個網頁需要大面積顯示一個特定的字體的時候使用該方法，否則，FOUT 總會我們的第一選擇，因為"內容至上"。白屏方案與 FOIT很相似， 但對于你來說，你擁有控制在什么時候給用戶展示你的內容的自由，這種感覺會似乎更棒一些，不是嗎？而且在FOIT方案中， 不可見的文本有時候會給讀者帶來困惑，而徹底的白屏（或者一個進度條）會讓人很自然的覺得是一個正在加載的信號。

不管你是打算使用 FOUT 方案或者白屏方案， 我們都推薦您使用Web Font Loader這個JavaScript庫. Web Font Loader 可以讓你對 @font-face加以控制， 而且你也為字體加載的體驗添加控制事件。

注意： 有一個W3C 字體加載 API也會實現同樣的功能，但是它現在的 支持不是很好_

FOUT 方案

下面是一個使用 Web Font Loader 實現了 FOUT的例子：

<script type="text/javascript"> WebFontConfig = {
    google： { families： [ 'Lora：400，700，400italic，700italic：latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https：' == document.location.protocol ? 'https' ： 'http') +
      '：//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf， s);
  })(); </script>

<noscript>
  <link target="_blank"  rel='stylesheet' type='text/css'>
</noscript>

<style> p {
    /* use fallback fonts */
  }

  .wf-active p {
    /* styles for custom fonts */
  } </style>

異步地使用 Web Font Loader 很重要，只有這樣做才不會延誤頁面其他部位的渲染。

寫樣式的時候，讓你的備用字體盡可能近的靠近你的實際字體，這樣才能最大程度的減少 FOUT造成的影響.點擊 這里你將會看到一系列的備選字體. 使用 這個工具你將很容易的看到備選字體和你引入的字體的對比效果.

白屏方案

下面是一個使用 Web Font Loader 實現了白屏方案的例子：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script> WebFont.load({
    google： {
      families： ['Raleway'， 'Oswald']
    }
  }); </script>

<noscript>
  <link target="_blank"  rel='stylesheet' type='text/css'>
</noscript>

<style> .wf-loading {
    display： none;
  }

  .wf-active p {
    /* styles for custom fonts */
  }

  p {
    /* use fallback fonts */
  } </style>

在這個例子里面，備選字體不需要和你引入的字體看起來很像，因為我們不會用到 FOUT. 依照你自己的喜好去選擇備選字體吧。

如果你想要用一個進度條取代白屏，你可以使用Pace。這種方法在用戶體驗上效果會更好一些，特別是當字體文件很大的時候。

擴展閱讀：

OpenType 的特性

OpenType 的特性可以被視為文字進行字體排版時的可選項，它們被用來加強文字的表現和易讀性。

p {
  font-kerning： normal;
  font-variant-ligatures： common-ligatures contextual;
  -moz-font-feature-settings： "kern"， "liga"， "clig"， "calt";
  -ms-font-feature-settings： "kern"， "liga"， "clig"， "alt";
  -webkit-font-feature-settings： "kern"， "liga"， "clig"， "calt";
  font-feature-settings： "kern"， "liga"， "clig"， "calt";
}

OpenType 特性被放置于字體之中，這就意味著對于不同的字體，會有不同的特性，在使用這些特性之前，我們需要看一看我們的字體是否支持這些特性。

使用 font-feature-settings來激活 OpenType 特性. 由于目前對于這個屬性的支持不好，我們需要在屬性之前加上前綴。

Kerning kern， ligatures liga， contextual ligatures clig， 和 contextual alternatives calt這四種適用于所有字體中 ######( 譯者注：font-feature-settings這種屬性僅支持拉丁文語系的字體使用，并不支持中文哦！ )

擴展閱讀：

Web Style Guide

相對大小

盡可能的使用相對大小。

html { font-size： 100% }
p { font-size： 1em }

@media (min-width： 64em) {
  html {
    font-size： 112.5%;
  }
}
  • font-size： 100% 與瀏覽器的字體大小設定保持一致而不是去覆寫它，根據大多數的瀏覽器的默認設置，這里也可以用1em 代替表示 16px.
  • 通過改變html 的 font-size會影響到所有單位為 em和rem 的元素.如果是對于響應式設計的網頁，這樣做還是比較實用的。
  • 用戶的選擇也很重要，所有不要偏離 font-size： 100%和1em太遠.
  • 對于font-size建議使用rem 和 em.
  • 對于一些元素定位如margin， padding等等，建議使用 rem， em， 或者 % 。
  • 對于媒體查詢中尺寸建議使用em.
  • 對于一些大的標題字或者配有圖片的字，可以使用FitText來實現標題的縮放。盡量避免使用vw 和 vh因為現在的支持還不是很好，難于精確的配置，并且對于一些瀏覽器的字體和縮放設置并不適配 。

擴展閱讀：

容器

容器，或者稱為包裝，指的是用來包裹一個或者多個元素的HTML元素。它將元素分組，從而更好進行語義化、修飾以及布局。

html {
  box-sizing： border-box;
}

*，
*：before，
*：after {
  box-sizing： inherit;
}

.container {
  max-width： 67rem;
  padding-left： 1.5rem;
  padding-right： 1.5rem;
}
  • 強烈建議使用 box-sizing： border-box. 點擊這里 查看更多信息。
  • 左/右內間距與最大寬度聯合使用可以很容易地創建一個移動端友好的容器。
  • 要為容器選擇一個合適的寬度，既不能太大（因為太大的話讀者的眼睛難以聚焦）也不能太小（這樣讀者的眼睛需要經常移動才可以看清）。永遠記住，在進行網頁字體排版的時候，沒有一個適合所有字體、尺寸、行距和分辨率的鐵律，你需要自己來做決定。

擴展閱讀：

字體大小

使用 縮放模塊 可以幫助你決定在你的元素上面應用怎樣的font-size .縮放模塊指的是依照其內容安排的一系列比較合適的字體大小的數值。

超贊！最佳WEB字體排版實踐的簡明指導手冊

縮放模塊的說明. 點擊此處

  • 我們可以在編寫CSS的一開始使用縮放模塊，將它作為一個參考。
  • 值的注意的是，盡管不同的字體有著不同的大寫字母高度和x字母高度，可是大多數的模塊化縮放工具都沒有將這些考慮在內。
  • 在你的樣式表中，建議將你所使用到的縮放模塊工具的配置信息寫在注釋之中。

響應式的縮放模塊

只使用單獨的一個縮放模塊方案并不一定適合所有分辨率的設備，為了解決這個問題，你可以依據用戶的設備的分辨率的不同提供不同的縮放方案

//Sass responsive modular scale

/* 
 * Modular scale
 * http://www.modularscale.com/?1.25&em&1.33&web&text
*/

$type-scale-large： (
  h1： 3.911rem，
  h2： 2.941rem，
  h3： 2.211rem，
  h4： 1.663rem，
  p： 1.25rem
);

/* 
 * Modular scale
 * http://www.modularscale.com/?1.25&em&1.25&web&text
*/

$type-scale-medium： (
  h1： 3.052rem，
  h2： 2.441rem，
  h3： 1.953em，
  h4： 1.563rem，
  p： 1.25rem，
);

/* 
 * Modular scale
 * http://www.modularscale.com/?1.1&em&1.25&web&text
*/

$type-scale-small： (
  h1： 2.686rem，
  h2： 2.148rem，
  h3： 1.719rem，
  h4： 1.375rem，
  p： 1.1rem
);

$breakpoint-medium： 75em;
$breakpoint-small： 45em;

@mixin size($level) {
  font-size： map-get($type-scale-large， $level);
  @media (max-width： $breakpoint-medium) {
     font-size： map-get($type-scale-medium， $level);
  }
  @media (max-width： $breakpoint-small) {
     font-size： map-get($type-scale-small， $level);
  }
}

// Example

.title {
  @include size(h1);
}

擴展閱讀：

垂直距離

文字間的垂直距離是由 line-height， margin， 和padding構建出來的.

  • line-height 不應該帶有單位。比較寬的容器里面文字的行高會大一些，而那些比較窄的容器里面行高相對來說小一些會比較合適。
  • 為那些具有單方向的文本元素添加margin屬性，建議使用margin-bottom.
  • 要遵循距離原則.

垂直節律

垂直節律是指元素之間的垂直間隔要保持一致性。這一點十分重要，它可以帶給讀者視覺上放松的享受，給他們一種親近的感覺。

超贊！最佳WEB字體排版實踐的簡明指導手冊

Image source建立垂直節律很簡單。首先，確定你使用的基礎垂直內間距和基礎垂直外間距的數值。然后，為你的容器，文字性元素或者其他相關元素的單方向的外邊距（或者內邊距）應用這個數值。如果你需要制制造更大的間隔的話，應用這個數值的倍數就好啦!

將基礎間距的數值設置成與行高相同的數值，這樣你的文字就像寫在一個條格紙上那樣整齊，就像我們傳統的印刷字體設計的那樣。然而，想要文字擁有垂直節律不一定需要按照上面的方法來做，只要你設置了一個基礎間距，并且使得其他間距都是由這個間距成倍的得來的，那樣就可以了。

body { 
  line-height： 1.4; // Base line height
}

p { 
  font-size： 1.25em; // Base font size
  margin-bottom： 1.75rem; // Base vertical spacing： (1.4 * 1.25) = 1.75
}

h1 {
  font-size： 3em;
  margin-bottom： 3.5rem; // Double the base value for a larger gap (1.75 * 2) = 3.5
}

h2 {
  font-size： 2em;
  margin-bottom： 1.75rem;
}

h3 {
  font-size： 1.5em;
  margin-bottom： 1.75rem;
}

.page-container {
  padding： 3.5rem 2rem; // 3.5 is double the base value
}
/* Simple Sass Implementation */

$base-line-height： 1.4;
$base-font-size： 1.25rem;
$vertical-rhythm： $base-line-height * $base-font-size;

body { 
  line-height： $base-line-height;
}

p { 
  font-size： $base-font-size;
  margin-bottom： $vertical-rhythm;
}

h1 {
  font-size： 3em;
  margin-bottom： $vertical-rhythm * 2;
}

h2 {
  font-size： 2em;
  margin-bottom： $vertical-rhythm;
}

h3 {
  font-size： 1.5em;
  margin-bottom： $vertical-rhythm;
}

.page-container {
  padding： ($vertical-rhythm * 2) 2rem;
}

文字底部對齊基線網格

文字底部對齊基線是垂直節律的一個更為嚴格的實現。在網頁中，文字通常在line-height間居中對齊.但對于較大的文字來說會比較討厭，因為這樣做會導致在頂部和底部留有太多的空間。在傳統印刷的時候，這個問題一般會通過讓文字對齊基線網格的底部得以解決。

我們也可以通過為較大的文字添加一個負的margin-top和一個較小的margin-bottom，不需要使用基線網格而解決這個問題。

超贊！最佳WEB字體排版實踐的簡明指導手冊

圖片資源為不同的字體樣式、字體大小和分辨率添加一個底部對齊的基線網格并不是一個很容易的方式，所以強烈建議你使用一個字體排版基線庫例如 Sassline 或者 MegaType.

注意，垂直節律只是一個建議，而且基線網格也只是想象出來的。所以我們不需要在每個使用場合都遵循這個規律，也不用在每個元素中都去追求像素級別的完美。

擴展閱讀：

顏色

顏色可以很大程度上的增加視覺辨識度，是字體排版中一個重要的組成部分。

  • 不要隨心所欲的挑選顏色，建議使用顏色板，建議你使用 Material Design colors 和 Flat UI colors 中提供的顏色板進行顏色選擇.
  • 不要過度濫用一個顏色，因為這樣會造成辨識度的降低，同樣也不要使用很多完全不同的顏色。
  • 遵循相似原則.
  • 不建議使用純黑 #000 作為你的正文顏色，你可以選擇一個非常灰的顏色如#333.
  • 有時候，使用透明顏色比使用淺色會更好一些，如果你深入的了解，可以點擊這里 。
  • 確保文字和背景有較大的對比度，你可以使用 這個對比度檢測工具 幫助你進行選擇.

####擴展閱讀：

下劃線

在印刷品里，永遠都不要使用到下劃線，因為這樣做會影響文字的閱讀，重點是，它很丑！Practical Typography

一般的來說，在網頁中下劃線也會看起來并不美好！幸運的是， background-image 就包含一個方法，它可以使得下劃線變得好看一點。 下面是Adam Schwartz使用Sass實現的下劃線的例子 ：

@mixin text-underline-crop($background) {
  text-shadow：  .03em 0 $background， 
                  -.03em 0 $background，
                  0 .03em $background，
                  0 -.03em $background，
                  .06em 0 $background，
                  -.06em 0 $background，
                  .09em 0 $background，
                  -.09em 0 $background，
                  .12em 0 $background，
                  -.12em 0 $background，
                  .15em 0 $background，
                  -.15em 0 $background;
}

@mixin text-background($color-bg， $color-text) {
  background-image： linear-gradient($color-text， $color-text);
  background-size： 1px 1px;
  background-repeat： repeat-x;
  background-position：  0% 95%;
}

@mixin text-selection($selection) {
  &：：selection {
    @include text-underline-crop($selection);
    background： $selection;
  }

  &：：-moz-selection {
  @include text-underline-crop($selection);
  background： $selection;
  }
}

@mixin link-underline($background， $text， $selection){
  @include text-underline-crop($background);
  @include text-background($background， $text);
  @include text-selection($selection);

  color： $text;
  text-decoration： none;

  *，
  *：after，
  &：after，
  *：before，
  &：before {
    text-shadow： none;
  }

  &：visited {
    color： $text;
  }
}

/* Example usage */
a {
  @include link-underline(#fff， #333， #0CBF);
}

超贊！最佳WEB字體排版實踐的簡明指導手冊

SmartUnderline 是一個簡化這個工作的庫。建議你只在有鏈接的地方使用下劃線，這是大多是網站都遵循的規律，如果不這么做的話，可能會引起誤解。

擴展閱讀：

總結

恭喜你，你已經快讀完這篇手冊了。在web，這種用戶可以在任何分辨率的設備上使用的媒介上進行字體排版是及其困難的。在很多年前，當我第一次開始設計網頁的時候，我發現幾乎找不到最新的關于最佳WEB字體排版實踐的信息。很多專家發表的博客文章內容相互矛盾，而且很多市面上的web字體排版的書籍也很少談及具體技術應用的細節。字體排版手冊希望可以解決這個問題，并且為菜鳥們提供應該了解的關于如何創建符合字體排版工業標準的全部知識。我希望這個成果可以令你滿意。

擴展閱讀：

「騰訊ISUX六月份出品的精品好文」

100個彈框后的經驗總結：
《超全面！騰訊設計師做了100個彈框后總結的設計經驗》

QQ這16年來的LOGO變化：
《你我的青春！來看看騰訊QQ這16年來的LOGO 設計變遷》

QQ表情優化背后的故事揭秘：
《騰訊設計師揭秘！QQ默認表情優化背后的設計故事》

原文地址：?typographyhandbook
譯文地址：http://www.zcfy.cc/article/696

超贊！最佳WEB字體排版實踐的簡明指導手冊

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量160萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com

程遠鐵粉

文章 6813 人氣 32574.6w

優設 內容總監
收藏 11
點贊 2

復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。

繼續閱讀本文相關話題

文章目錄