文本

Sketch 使用操作系統(tǒng)原生的字體渲染，因此文本看起來都會(huì)很棒。使用原生字體渲染的好處就是當(dāng)你進(jìn)行網(wǎng)頁設(shè)計(jì)時(shí)，你可以肯定作品中的文本都是精準(zhǔn)的。Sketch 同時(shí)支持文本樣式，所以你可以讓多個(gè)文本圖層使用共同的字體，大小，和字間距等等。

添加文本

你可以從工具欄中選擇文本工具。當(dāng)光標(biāo)變成文本光標(biāo)時(shí)，在畫布中任一點(diǎn)單擊以添加文本圖層。你會(huì)看見新的文本圖層已被選定，直接開始打字吧。

你也可以單擊并拖動(dòng)鼠標(biāo)以創(chuàng)造一個(gè)固定尺寸的文本框，當(dāng)文本內(nèi)容大于文本框時(shí)，會(huì)自動(dòng)向下擴(kuò)展文本框長度。而普通的不固定尺寸的文本框則會(huì)向后擴(kuò)展寬度以適應(yīng)文本內(nèi)容。

改變文本大小

如果你直接拖拽文本框，文字本身的大小并不會(huì)相應(yīng)改變，但是你可以拉動(dòng)文本框底部的縮放手柄來一起控制文本框和文字的大小

文本檢查器

當(dāng)你選中了一段文本，你會(huì)發(fā)現(xiàn)檢查器隨之變成了編輯文本所需要的屬性。

在基本的圖層屬性下面是共享文本式樣的區(qū)域。

接著是選擇字體和字號(hào)的地方，同時(shí)你可以展開 T 按鈕，來選擇一些文字裝飾，比如下劃線。再下面則可以選擇字間距，行間距和段落間距。

文本顏色

編輯文本時(shí)，你可以通過 T 按鈕和字號(hào)中間的顏色按鈕為文本設(shè)置單獨(dú)的顏色。你也可以為文本設(shè)置一個(gè)通用的填充式樣，比如漸變，但是任何填充都將針對(duì)整個(gè)文本圖層，這將覆蓋剛才那個(gè)顏色按鈕的設(shè)置。

值得注意的是，為了在文本上渲染漸變效果，我們得將文本轉(zhuǎn)化為矢量圖形，并失去文本的子像素抗鋸齒效果。

自動(dòng)大小文本框 VS 固定大小文本框

文本框的寬度屬性（在對(duì)齊功能的下面）可以被設(shè)置為自動(dòng)或者固定。自動(dòng)大小文本框意味著它會(huì)自動(dòng)擴(kuò)展以容納你輸入的一切文本。固定大小文本框則會(huì)在你輸入更多內(nèi)容時(shí)保持現(xiàn)有寬度不變，而增加文本框的長度。

文本渲染

Sketch 使用操作系統(tǒng)原生的字體渲染，因此文本看起來都會(huì)很棒。使用原生字體渲染的好處就是當(dāng)你進(jìn)行網(wǎng)頁設(shè)計(jì)時(shí)，你可以肯定作品中的文本都是精準(zhǔn)的。

Mac OS 系統(tǒng)使用了一種叫子像素抗鋸齒效果 （subpixel-antialiasing）的技術(shù)來提升文本渲染效果，Sketch 里也是采用的這一種。但有時(shí)會(huì)出現(xiàn)一些問題警告，我們從一些底層技術(shù)來慢慢解釋。

子像素抗鋸齒技術(shù)

一個(gè)電腦的顯示器是由網(wǎng)格狀的像素組成的。文字渲染遇到的問題是普通的屏幕里并沒有足夠多的像素來精確的展現(xiàn)文字的曲線。這就需要用到子像素抗鋸齒技術(shù)了，它會(huì)將那些被文字曲線遮住一部分的像素稍稍變亮一些，并且在視覺上產(chǎn)生更平滑的效果。

這就是為什么當(dāng)你在像素模式中把文本放很大觀察時(shí)，你會(huì)看見文字旁邊有一些藍(lán)色和棕色的小色塊，但是在正常大小時(shí)，這些文字效果又沒有任何問題。Windows 用戶對(duì)這種子像素抗鋸齒技術(shù)不太習(xí)慣，他們總是將 Mac 的文字渲染形容成 “很胖”。

無法實(shí)現(xiàn)抗鋸齒時(shí)

順利實(shí)現(xiàn)子像素抗鋸齒效果，文本必需出現(xiàn)在一個(gè)不透明的（有色的）背景上，因?yàn)橄到y(tǒng)需要知道最終的顏色對(duì)比結(jié)果是什么樣的。這一點(diǎn)與圖層混合模式是相沖突的。

要實(shí)現(xiàn)圖層混合模式，Sketch 需要在一個(gè)透明背景上渲染所有的圖層，這樣這些圖層才能像你所期望的那樣混合在一起，最終結(jié)果再渲染回 Sketch 的白色畫布上。

這就會(huì)帶給我們一個(gè)問題，如果沒有一個(gè)不透明背景我們就不能渲染抗鋸齒的文字，但是有了不透明的背景我們又不能渲染圖層的混合模式了。這就意味著，一旦你的畫布中出現(xiàn)了一個(gè)有混合模式的圖層，Sketch 就不得不運(yùn)用透明背景的算法，而無法給文字實(shí)現(xiàn)子像素抗鋸齒效果了。

你可以嘗試對(duì)比一下，將一段文本放在不透明背景上（比如填充顏色或者填充了圖片的圖形）來看看效果。

導(dǎo)出

另一個(gè)關(guān)于子像素抗鋸齒效果的問題出現(xiàn)在導(dǎo)出上。在畫布上，Sketch 可以順利的渲染有色背景上的文本。但當(dāng)你將文本導(dǎo)出為 PNG 文件，并保持背景透明，你便會(huì)發(fā)現(xiàn)文本變得不太一樣——因?yàn)楸尘笆峭该鞯?，我們無法在透明背景下渲染子像素抗鋸齒效果。

和之前說的混合模式一樣，你也可以嘗試對(duì)比一下，將一段文本放在不透明背景上（比如填充顏色或者填充了圖片的圖形）來看看效果。

為 iOS 設(shè)計(jì)

蘋果最初發(fā)布 iPhone 時(shí)，他們決定不用子像素抗鋸齒技術(shù)來渲染手機(jī)上的文字，原因是顯示器上的像素都是由紅綠藍(lán)的光形成的，而 iPhone 是可以橫屏豎屏切換的，也就是說這些本來垂直排列的紅綠藍(lán)像素會(huì)突然水平排列，這樣一來，整個(gè)子像素抗鋸齒技術(shù)就崩潰了。蘋果可以保持豎屏?xí)r候的文字渲染，放棄掉橫屏的情況，但他們理智的決定保持豎屏與橫屏的體驗(yàn)一致。

所以每當(dāng)你在為 iPhone 或者 iPad 設(shè)計(jì)交互頁面，你都需要記住這一點(diǎn)：在畫布上，Sketch 會(huì)幫你對(duì)文字進(jìn)行子像素抗鋸齒渲染，但在移動(dòng)設(shè)備上，文字并不會(huì)被這樣處理。你需要告訴 Sketch 無需進(jìn)行子像素抗鋸齒渲染，通過 Sketch > Preferences > General, 取消選擇 subpixel-antialiasing。

共享式樣

你會(huì)經(jīng)常想將多個(gè)文本設(shè)置為同一式樣，共享式樣能實(shí)現(xiàn)這一點(diǎn)，他們會(huì)將你分散在不同圖層中的文本都保持同步。

值得注意的是，文本式樣只能在一個(gè)文件中共享，一個(gè)文件中的不同頁面不同畫板都能夠使用。

創(chuàng)建式樣

想要?jiǎng)?chuàng)建新的文本式樣，你需要先選中一個(gè)文本框，然后進(jìn)入 圖層 > 創(chuàng)建共享式樣 （Layer > create Shared Style），你會(huì)發(fā)現(xiàn)檢查器立即顯示出了當(dāng)前圖層的文本式樣，你也可以在這里給式樣重命名。

如果文本屬性發(fā)生任何改變，都會(huì)自動(dòng)與其他使用同一式樣的文本保持同步。

新的文本圖層

你可以和往常一樣添加第二個(gè)文本圖層，然后在檢查器中給這個(gè)文本使用之前創(chuàng)建好的式樣。另一個(gè)直接添加特定式樣文本圖層的方法是，進(jìn)入 添加 > 式樣文本 (Insert > Styled Text)，然后選擇你想要的式樣，接下來的步驟和添加正常的文本圖層則是一樣的了。

注意：在Sketch 2 中我們就已經(jīng)有了文本共享式樣的功能，在Sketch 3中又進(jìn)一步升級(jí)了。最大的變化就是，現(xiàn)在漸變填充，陰影和內(nèi)陰影都能包含在文本式樣當(dāng)中了。

Sketch支持文本渲染路徑，比如右邊這樣：

我們只需要兩個(gè)東西來實(shí)現(xiàn)這個(gè)效果：一個(gè)矢量圖形和一個(gè)文本圖層。當(dāng)你進(jìn)入頂端的 編輯菜單 > 文本路徑 (Edit > Text on Path)，Sketch會(huì)幫你把文本圖層貼合的放在它下一層的矢量圖形上面。值得注意的是，兩者的順序必須是矢量圖形在文本圖層的下面，才能得到這樣的效果。

放置文本圖層時(shí)你只需將文本橫向拖至矢量圖形，這點(diǎn)很難用文字表述，但你可以在創(chuàng)作中非常直觀的看到他們?nèi)绾螌?shí)現(xiàn)。

文本路徑

文本轉(zhuǎn)化為輪廓

文本也都可以被轉(zhuǎn)換成矢量圖形，你可以執(zhí)行 文本 > 將文本轉(zhuǎn)換為輪廓 (Type > Covert Text to Outlines) 的命令來實(shí)現(xiàn)。這會(huì)將文本中的每個(gè)字母都變成圖形，你可以向編輯任何其他圖形一樣單獨(dú)編輯每一個(gè)路徑和錨點(diǎn)。

警告

但是，請(qǐng)額外留心這個(gè)操作。不要將很長一段文字都轉(zhuǎn)化為矢量圖形，這回大大減緩文件的運(yùn)行速度。

將一小段文字轉(zhuǎn)化為大量包含布爾運(yùn)算的子路徑是非常非常消耗系統(tǒng)內(nèi)存的，如果你不得不轉(zhuǎn)換一段文字，那么你可以先將一段文字盡可能分成多個(gè)短文本，然后再一個(gè)個(gè)的轉(zhuǎn)化為矢量。

不過既然你現(xiàn)在可以直接在文本上運(yùn)用漸變等效果，大多數(shù)時(shí)候你都不會(huì)需要將文本轉(zhuǎn)化為輪廓。