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

前言

这两天我在 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中显示的字体名称作为属性的值。

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

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

测试结果

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

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

折腾感想

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

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

感谢观看,三连走起~

本文分享自微信公众号 - 牧码啦(mumalo)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Creator星球游戏开发社区

Cocos Creator 出新版本啦, 2.1.2 圆形Shader终于可以完美解决了!

自 Cocos Creator 2.1.0 发布以来,经过半年时间更新迭代,版本现已趋于稳定,目前 2.1 的新增用户已经占据主流。因此我们计划减少 2.0 版...

52630
来自专栏智能计算时代

「首席架构师推荐」精选的开源工作流引擎列表,

原文:https://github.com/meirwah/awesome-workflow-engines

21020
来自专栏用户5948733的专栏

手机里的照片误删了怎么恢复?这样做你也能恢复

  手机里的照片误删了怎么恢复?随着现在手机的像素越来越高,现在iPhone 11都出三摄了,很多人都会使用手机里面的相机拍摄照片,这样一来,手机中就会有很多的...

10020
来自专栏全栈者

移动端页面开发遇到的一些问题

5、当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对 ios 的 safari

8920
来自专栏iOS代码混淆

iOS-规避iOS审核4.3规则的重心

最近iOS卡审严重,很多小伙伴都被拒了,也有很多小伙伴收到4.3礼包,这里就说说4.3吧!

14820
来自专栏ios 技术积累

Flutter Stack 组件

alignment : 指的是子Widget的对其方式,默认情况是以左上角为开始点 。

11430
来自专栏智能计算时代

「首席架构师推荐」工作流引擎哪家强?首席架构帮你挑

原文:https://github.com/meirwah/awesome-workflow-engines

36960
来自专栏运维猫

Nginx+Keepalived实现服务的高可用

Keepalived软件起初是专为LVS负载均衡软件设计的,用来管理并监控LVS集群系统中各个服务节点的状态,后来又加入了可以实现高可用的VRRP功能。...

14420
来自专栏用户6325611的专栏

5G该不该成为2019年购买新手机的重要指标?

  今年iPhone11系列的销量让不少人大跌眼镜,早前数据显示,天猫iPhone11预售首日的销售数据较iPhoneXR增长了335%。京东iPhone11预...

11230
来自专栏移动直播 SDK License

移动直播 SDK License 使用指南

您可以免费申请测试 License(基础版,有效期14天,可申请两次)体验测试,具体步骤如下:

27150

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励