技巧 | 微信文章有那么多种字体？

前言

这两天我在 md-nice 用户群里看到有人在群里问怎么设置微信推文里的字体，恰好我前阵子刚好看过一篇关于微信推文字体排版的文章，

原文：

9102 年了，公众号还不会换字体？

字体科普

我们平常在手机端看到的文章为什么会出现各种各样的字体？

1、我们日常看到的各种字体是手机上本身自带的字体。

2、不论你在文本或编辑器选什么字体，遇到手机不支持的就会自动变成默认字体。

3、苹果手机支持多种中英文字体，安卓仅支持手机自带的一个字体。

苹果手机支持的字体

⊰ 细体系列 ⊱

▪PingFangSC-Light、▪PingFangHK-Light、▪PingFangTC-Light、▪STHeitiSC-Light、▪STHeitiTC-Light

值得一提的是，如果你仔细观察，会发现PingFangTC-Light的字体在字形上会和传统的有些区别

⊰ 粗体系列 ⊱

粗体系列其实就是细体系列的加粗版本：

▪PingFangSC-Medium、▪PingFangHK-Medium、▪PingFangTC-Medium、▪STHeitiSC-Medium、▪STHeitiTC-Medium。

粗体系列一般不会用到太多，可以选择性使用。

⊰ 日本字体系列 ⊱

日本字体系列本是日本字，但是可支持中文显示。字体包括了四种，分别是

▪HiraKakuProN-W3、▪HiraKakuProN-w6、▪HiraMinProN-W3、▪HiraMinProN-W6。

字体在苹果手机呈现的时候，部分字体会和我们日常看到的字体有所区别。如果喜欢这类字体的话，推荐使用HiraKakuProN-W3

⊰ 英文字体 ⊱

苹果端手机还支持大量的英文字体，这里我们精选出了 6 款英文字体，分别是：

▪Zapfino、▪Cochin-BoldItalic、▪MarkerFelt-Thin、▪Futura-Medium、▪CourierNewPS-ItalicMT、▪Futura-CondensedExtraBold

关于字体修改：

这里我们以「STHeitiSC-Light」字体为例：它的 css 语法如下：

font-family: STHeitiSC-Light;

基本上我们要改字体，直接在对应标签下找到「font-family」属性修改字体的值就行。

以上是 i 排版提供的信息，非常感谢！

下面是我的一些补充说明和发现~

“语法说明 font-family 指的是字体，STHeitiSC-Light 为对应的字体名称。 如果字体名称包含空格或中文，则应使用引号括起。”

下面讲一下如何设置多种字体：

body {    font-family: helvetica, verdana, sans-serif;}

如上定义，假设你的机器上没有 helvetica 字体，但有 verdana，这时将会以 verdana 显示你的文字，如果两种字体都没有，则会显示默认字体。

Find more

本着瞎折腾的精神，不是说 iPhone 上支持很多英文字体吗？所以我打算去一探究竟！

1、我首先想到的是 「Safari」 浏览器中有阅读模式，那会不会有字体选择呢？

所以我分别打开了百度文库和英文阅读网，目的是为了看看中文和英文模式下分别有哪些字体。

当我各自点开一篇文章，『选择 「左上角的阅读模式」 - 点击右上角的 「AA」』

这时可以看到「中文状态」下，浏览器中只内置了标准的「苹方」字体，如下图：

然而在英文模式下就不一样了：

2、如此一来，我突然来了精神，想起似乎在 「OneNote」 中瞥见过 IOS 字体，于是我又开始折腾起来！

打开 OneNote ，「点击头像」，进入 「编辑和查看」 ，点击 「默认字体」 。

可以看到导航栏显示的 Office 兼容字体：一直向下滑，直到导航栏显示 IOS 字体，这时就能看到 OneNote 中引用的 IOS 中的内置字体了：

问题是，这么多字体，难道我要一个个把名字打上去吗？

这时我想到白描取字，于是开始了截图识别。可是识别完我又想，里面的字体那么多，有些字体看起来更是花里胡哨的，万一扫描出了错怎么办？

所以我打算换个折腾方式~

瞎折腾

我从爱思助手上把 OneNote 下载下来，然后解压，决心找到调用字体的文件，首先发现的是 Office 兼容字体：

我在 「解压路径」：..\Payload\OneNote.app路径下找到了DWriteFontInfo.plist的文件，打开看了一下，正好就是字体文件。

可以看到，每个 key 值对应一个数组，数组的每个 string 中包含的正是字体名称。

MSBundledFontsPostscriptNames 翻译过来大意是「微软捆绑字体」，所以我猜测这应该是软件内置的 Office 兼容字体。

至于 OSFontsToSkipPostscriptNames 翻译大概意思是「跳过字体名称的系统字体」，虽然我没看懂，但我猜测应该跟 IOS 本地字体有关。

为了验证猜想，我在本地找到了存储 ttf 格式字体的文件夹，对比字体名称与文件，我的猜想是对的，如下图：

这也就是说，字体文件和名称对上号了。那另外那些就是 IOS 的字体了。

于是，我用记事本把<string></string>替换成空格，就得到了 OneNote 中调用的 iOS 本地字体了：

▪AquaKana▪AquaKana-Bold▪LastResort▪GB18030Bitmap▪MyanmarMN▪MyanmarMN-Bold▪MyanmarSangamMN▪MyanmarSangamMN-Bold▪Skia-Regular_Black▪Skia-Regular_Black-Condensed▪Skia-Regular_Black-Extended▪Skia-Regular_Bold▪Skia-Regular_Condensed▪Skia-Regular_Extended▪Skia-Regular_Light▪Skia-Regular_Light-Condensed▪Skia-Regular_Light-Extended▪Thonburi▪Thonburi-Bold▪Thonburi-Light▪ZapfDingbatsITC▪STXihei▪STIXIntegralsD-Bold▪Symbol▪TimesNewRomanPSMT▪TimesNewRomanPS-ItalicMT▪TimesNewRomanPS-BoldMT▪TimesNewRomanPS-BoldItalicMT▪YuGo-Medium▪YuGo-Bold▪YuMin-Medium▪YuMin-Demibold▪YuMin-Extrabold

当我以为大功告成时，我突然意识到不对劲！那就是 OneNote 中一共有 71 种 IOS 字体，而我这里提取的字体名称数，却相差甚远，这是掰着脚指头都能数的清的！

我于是打开 OneNote 进行对比，却发现没有一种字体对得上号！

我打开百度百科，搜索 PostScript ：

也就是说，这些字体都属于打印字体，所以我猜测这应该是被 OneNote APP 中过滤掉的字体，这也就是为什么在软件内找不到字体名称的原因！

再次猜想

虽然这些字体被过滤了，但是能用到推文中吗？

折腾完了，怎么能不试一下呢？于是我开始了新的测试~

首先我在 md-nice 的全局属性中写入 font-family 属性，分别以Safari 浏览器、OneNote 内的 IOS 字体、以及DWriteFontInfo.plist中显示的字体名称作为属性的值。

然后按照优先级依次写入字体名称，

再将测试文档渲染后粘贴到微信的推文中预览查看字体是否变化。

测试结果

Safari、 OneNote、 DWriteFontInfo.plist目录中提及的 IOS 字体均能引入到微信推文中。

也就是说上文提及的所有字体均能被引用！

折腾感想

折腾了很久，有点累，但是感觉还是很爽的~

又多了好多字体可以用了，美滋滋~

感谢观看，三连走起~