如何保持web页面macOS、Windows系统中文字体一致性

今天在写一篇博文时，发现同样一篇文章（瑞·达利欧《原则》读书笔记——生活原则），设置了中文【楷体】字体，在 macOS、Windows 系统上却是不同的显示效果。我在写这篇博文时是这样做的：

1）在 macOS 系统中编写了博文的前面一部分，将 macOS 版本中 word 文段设置为【华文楷体】，直接粘贴到博文中，该部分内容在 macOS 系统的 Chrome 浏览器中正常显示为楷体；
2）在 Windows 系统中做了类似的操作，只不过是在 Windows 版本中的 word 文段字体设置为【楷体】，直接粘贴到博文中，该部分在 Windows 系统的 Chrome 浏览器中正常显示；
3）发现错误：上面的两个文字片段仅在编写的系统上正常显示，在交叉系统上显示为默认字体——黑体/华文黑体。

不能正常交叉显示的效果截图如下（macOS 系统截图）：


产生这个问题的原因是，macOS 和 Windows 系统不共用一套中文字体：

Windows 系统中的常见中文字体如下：

黑体：SimHei
宋体：SimSun
新宋体：NSimSun
仿宋：FangSong
楷体：KaiTi
仿宋GB2312：FangSongGB2312
楷体GB2312：KaiTiGB2312
微软雅黑：Microsoft YaHei

而 macOS 系统中的常见中文字体如下：

冬青黑体: Hiragino Sans GB
华文细黑：STHeiti Light （或 STXihei）
华文黑体：STHeiti
华文楷体：STKaiti
华文宋体：STSong
华文仿宋：STFangsong

以上面的【楷体】字体为例，macOS 系统和 Windows 系统并不兼容（虽然肉眼看上去差不多），所以就导致了在 macOS 系统中设置的【华文楷体】字体在 Windows 系统中不能显示为楷体（【楷体】字体），只能显示为默认字体，反之在 Windows 系统上也是一样的，【楷体】也不能在 macOS 系统中显示为楷体（【华文楷体】字体）。

那么解决办法是什么呢？

这里需要了解一点 web 开发的小知识，页面中的某个元素（例如文段）在设置字体时，会有一个【font-family】声明字段，如果我们声明了该元素显示为【华文楷体】，且操作系统含有这个字体时，就会显示为【华文楷体】，若找不到该字体或者没有声明其它的可选字体，那么就会显示为默认字体（默认字体随操作系统不同）。

解决的办法就是，我们在声明某个文段的字体时，将【font-family】字段声明为：

font-family: KaiTi,STKaiti;      （分别对应 Windows【楷体】、macOS【华文楷体】）

这样在不同的操作系统浏览器中，操作系统会先查找是否系统中包含“KaiTi（楷体）”字体，若包含则按这个声明的字体显示，若没有则继续查找下一个声明字体“STKaiti（华文楷体）”，若还是没有则显示为默认字体。

修改的方法就是：

将 blogger 的编辑器由【撰写】切换到【HTML】，将里面的 HTML 编码全部复制到代码编辑器中（方便进行查找替换），然后将里面只包含一个字体声明的字段，全部替换成“font-family: KaiTi,STKaiti”，修改完成后再全部粘贴回 blogger 编辑器中，点击【更新】就完成了。

下面是修改后的同样段落的显示截图（macOS 系统）：


我们看到在 macOS 系统和 Windows 系统上都可以显示为楷体了。但是要注意的是，【楷体】和【华文楷体】虽然在肉眼上看是一样的，但实际是不同的字体，在细微处还是有区别的。
标签：

评论

发表评论

此博客中的热门博文

如何批量下载Twitter用户的原始图片

图片
在 Twitter 关注了某个女明星之后，如果要下载她的写真照片，可以在手机 Twitter 客户端直接单张浏览保存，但是这种方式下载的图片往往是经过压缩处理后的，而且图片数量一多就不行了。 这里介绍一种可以批量保存某个 Twitter 账号所有推文里原始照片的方法（当然保存视频也是可以的），简要说明如下： 下载要求 1、你要下载的 Twitter 账号必须是公开的（推文加锁的不行） 2、Chrome 浏览器，并且安装下面介绍的插件（扩展程序） 操作步骤 1、在 Chrome 扩展程序商店页面搜索「 Twitter Media Downloader 」这个插件，安装到浏览器上。 2、电脑上登陆自己的 Twitter 账号，在搜索框中输入任意字符搜索。 3、在「搜索筛选」旁边点击「显示」按钮。 4、再点击下面的「高级搜索」。 5、在展开的搜索页面输入搜索条件，点击搜索。一般常用的搜索条件是 Twitter 账号和搜索日期范围。 点击搜索按钮后是下图这样的页面，其中 from 是搜索的账号，since 是开始日期，until 是结束日期 。这样我们就可以编辑这个搜索条件，粘贴到搜索框中直接使用了。需要注意的是，搜索结果中有时候不包含 until 的结束日期这一天，如果结果中没有可以将结束日期后延一天。 6、点击上图中标示出的「Media」下载按钮，会弹出权限授权页面，同意之后打开如下的下载页面： 我一开始测试了半年的下载，为了避免默认的 1000 条推文超量，我将「limit」字段的值改为 10000，并且只选择了图片下载。上图是下载完成的结果，展示了单个图片的下载信息和总完成任务情况。我们解压缩下载生成的压缩包就得到了需要的照片了。 其它可能需要的技能可以点击这个页面查阅
阅读全文

使用ADB不root删除小米MIUI系统自带应用

图片
上面这张图就是小米官方的广告投放系统介绍，小米的 MIUI 系统铺天盖地的广告也一再被用户吐槽为 ADUI，想来广告现在已经成了 MIUI 系统最显著的特点了。 在前一篇文章「 小米MIUI系统重刷第三方recovery及获取root权限 」里，详细介绍了如何给 MIUI 系统刷入第三方 recovery 以及获取 root 权限，整个国产还是相当繁琐的。但是小米手机的系统广告无法关闭，还有没有其它的办法缓解垃圾广告骚扰呢？办法是有的。 将 MIUI 系统 root 并且使用管理工具屏蔽广告推送，或者 root 后直接刷入干净的第三方 rom，都是一劳永逸地解决垃圾广告问题的方法，使用本文介绍的 ADB 工具屏蔽广告的效果没有前面两个好，但好在不是很麻烦，而且不用 root 系统。 方法及步骤说明如下： 1、下载 ADB 工具 ADB 全称 Android Debug Bridge（ Android 调试桥 ），是一个通用命令行工具，可以与模拟器实例或连接的Android 设备进行通信。查看介绍及下载可以直接前面的超链接。下载好之后把下面三个文件放到如下路径： C:\Windows 2、安装小米刷机工具（安装手机驱动） 小米通用刷机工具 自带手机驱动，安装好驱动才能正常使用 ADB 工具。 3、开启 MIUI 开发者模式 依次打开 设置-我的设备-全部参数 ，在「MIUI 版本」一栏连续点击多次，开启 MIUI 开发者模式。 4、开启 USB 调试 依次打开 设置-更多设置 ，进入开发者选项，再打开「USB 调试」和「USB 调试（安全设置）」两项，如下图所示： 5、用 USB 数据线连接电脑和手机 6、使用 ADB 命令删除 MIUI 系统自带应用 1）打开 Windows 系统的「命令提示符」工具（快捷键是 win + R，再输入 cmd 回车）； 2）指令移到上面的 adb.exe 所在目录： cd C:\Windows 3）删除应用的 ADB 命令是： adb shell pm uninstall --user 0 应用包名 【小技巧】获取应用包名的方法 方法1） MIUI 系统直接长按应用图标，选择「 ⓘ应用信息 」，再点击右上角的「 ⓘ 」图标，里面有「应用包名」条目，
阅读全文

QQ 邮箱添加 Gmail 报错的解决办法

由于众所周知的原因，在国内是不能正常使用 Google 服务的，包括异常强大的 Gmail 邮箱，而 QQ 邮箱是可以添加 Gmail 邮箱，从而可以实现代收代发邮件等功能。 但是在 QQ 邮箱 web 版中添加 Gmail 时，会有【 Gmail 接口验证失败，暂时无法添加 Gmail 账号 】的错误提示，解决该问题的方法是： 登陆 Google 账号，在【我的账号】中找到【登陆和安全】，把【 允许不够安全的应用 】设置为开启状态，再回到 QQ 邮箱中，就可以正常添加 Gmail 邮箱账号了。 当然这样设置的代价是，Google 账号的安全性就降低了。 但是在 QQ 邮箱手机版中添加 Gmail 邮箱则不会出现该错误提示。
阅读全文