UWP 使用SVG (ttf,otf)的两种方式

1. 直接使用

像传统图片一样，将svg文件添加到工程中，文件的属性为"Content"

在xaml中作为Image的source直接引用

这种方式只能在uwp中使用。

以下重点介绍， 将svg作为字体使用的方式，这种方式既可以在wpf中使用也可以在uwp中使用。

2. 作为字体的方式

随着富文本发展，程序界面将图标作为字体使用的原因和好处都有很多，对于wpf和uwp的UI，除了传说中提升性能外，最直接的好处是使用图标可以像文本内容一样处理，对于支持动态主题的UI，不再因为不同颜色而需要多套不同颜色的图标资源。

（1）那么如何做：

如何从svg的文件得到字体文件：

一般程序员从美工得到的图标资源是svg文件，有很多在线工具可以将svg文件转为字体，这里推荐一款比较好用的https://icomoon.io/app/#/select

将转换好的结果下载下来，得到以下文件结构，

         将fonts 文件夹下的 .ttf 文件添加到工程中，文件属性为"Content"

怎么使用字体文件：

在全局资源字典中声明为字体资源：

打开 “demo.html" 文件，会看到这样类似这样的项，最左边是图标的原型，下面是Unicode编码，这编码是该图标的唯一的标识。

在xaml中使用该图标

或者

 

如果在cs代码中使用这个标识时，需要这么写

那么相应的xaml就可以这样使用：

 

FontIcon是uwp才支持的标签， TextBlock和wpf中使用方式是一样的。

（2） 需要注意的问题：

并不是任何情况都需要将svg转为fonticon的，对于富彩色的，不需要和背景整合的图片资源，应该还是直接以svg的方式使用。

参考：

https://cloud.tencent.com/developer/article/1342012

https://www.cnblogs.com/mycing/p/5658355.html

Uwp fontICon

https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.fonticon?view=winrt-19041

Seoge MDL2 icons

https://docs.microsoft.com/en-us/windows/uwp/design/style/segoe-ui-symbol-font#how-do-i-get-this-font

https://stackoverflow.com/questions/51542582/uwp-text-cant-show-correctly-in-some-font-when-change-it-in-code-especially-ic