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/
說明：歡迎轉載并請標明來源和作者，如有錯漏請指出，謝謝，
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/450329.html
標籤：.NET技术
上一篇：資料庫中間件ShardingSphere-Proxy(一)
下一篇：VSCode前端插件推薦