首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >技巧 | 微信文章有那么多种字体?

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

作者头像
灵魂画师牧码
发布2019-10-16 20:27:46
3.1K0
发布2019-10-16 20:27:46
举报
文章被收录于专栏:灵魂画师牧码灵魂画师牧码

前言

这两天我在 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 字体均能引入到微信推文中。

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

折腾感想

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

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

感谢观看,三连走起~

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-10-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 牧码啦 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
    • 原文:
    • 字体科普
    • 苹果手机支持的字体
      • ⊰ 细体系列 ⊱
        • ⊰ 粗体系列 ⊱
          • ⊰ 日本字体系列 ⊱
            • ⊰ 英文字体 ⊱
            • 关于字体修改:
            • Find more
            • 瞎折腾
            • 再次猜想
            • 测试结果
            • 折腾感想
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档