1. 可變字體 上圖中的兩個動畫，一個文字直接變粗，一個漸漸變粗，我覺得後者會更有趣。但普通的字體可達不到這種效果，例如微軟雅黑，無論怎麼調整它的 FontWeight，實際上它也只有三種粗細： 這時候我們需要可變字體，可變字體（Variable fonts）是OpenType字體規範上的演進，它允 ...
1. 可變字體
上圖中的兩個動畫，一個文字直接變粗，一個漸漸變粗，我覺得後者會更有趣。但普通的字體可達不到這種效果，例如微軟雅黑，無論怎麼調整它的 FontWeight，實際上它也只有三種粗細：
這時候我們需要可變字體，可變字體（Variable fonts）是OpenType字體規範上的演進，它允許將同一字體的多個變體統合進單獨的字體文件中。從而無需再將不同字寬、字重或不同樣式的字體分割成不同的字體文件。你只需通過CSS與一行@font-face引用，即可獲取包含在這個單一文件中的各種字體變體。具體來說請參考這篇文檔：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
簡單來說，可變字體是可以實現隨意改變字重，滿足我需求的方案。而要實現隨意改變中文文字的字重，思源黑體 是其中一個不錯的選擇：
2. 假裝可變字體
可是我不知道怎麼在 WPF 里用可變字體，而且為了一個小小按鈕的小小動畫，居然要添加一個幾十兆大小的字體，這性價比實在低，低到不能接受。其實我最初的目標只是讓文字慢慢變粗，不一定需要讓文字變成粗體，用我上一篇文章提到的 實現文字描邊 也可以做到。文字描邊的基本原理是使用 FormattedText 的 BuildGeometry 拿到 Geometry，然後通過 Shape 畫出來，最後通過 Stroke, StrokeThickness 控制文字邊框的顏色和粗細。核心代碼如下：
var formattedText = new FormattedText(
Text,
CultureInfo.CurrentCulture,
FlowDirection.LeftToRight,
new Typeface(FontFamily, FontStyle, FontWeight, FontStretch), FontSize, Brushes.Black, 100);
_height = formattedText.Height;
_width = formattedText.Width;
_textGeometry = formattedText.BuildGeometry(new Point());
如果加大 StrokeThickness 可以讓文字的邊框變得很粗，效果如下：
如果將文字的文字和邊框設置為同一個顏色呢？改變 StrokeThickness 看起來就像改變 FontWeight，這就實現了我想要的效果：
當然，用這種方式假裝的可變字體的字形和原本的字形會有差別，但用在局部的動畫沒什麼大的問題。如果用得好，可以做不少有趣的 UI ，例如這樣：
從上面的想法延申一下，反過來從粗變細，可以玩另一種動畫。如果找一個超細的字體，例如這個：
將它的 StrokeThickness 由一個很大的值漸變成 0，可以做到下麵這種動畫：
3. 最後
這篇文章其實沒介紹什麼代碼技巧，只是從上一篇文章 實現文字描邊 延申出來的玩法。更多關於 WPF 的設計和動畫技巧，可以參考我這個項目：
https://github.com/DinoChan/wpf_design_and_animation_lab
作者：dino.c
出處：http://www.cnblogs.com/dino623/
說明：歡迎轉載並請標明來源和作者。如有錯漏請指出，謝謝。
