«

»

Jul 22 2019

修复一个坑害国人 22 年的字体问题

“从公开的文字上看起来:这几年来,我们重新开始自夸着‘地大物博’,是事实;不久就不仅自夸了,还给予希望于国联,也是事实;现在是既不仅夸自己,又被国联寄予厚望,一点也不求神拜佛,仿佛历史不存在了——却也是事实。”
“于是有人慨叹曰:‘中国人恢复自信力了……’”

——派生自鲁迅的《中国人失掉自信力了吗》

Muda muda muda muda muda muda muda muda muda muda!
Muda muda muda muda muda muda muda muda muda muda!
Muda muda muda muda muda muda muda muda muda muda!
Muda muda muda muda muda muda muda muda muda muda!
WRYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY!
Muda muda muda muda muda muda muda muda muda muda!
MUDA!
「𰻝𰻝面」,或油泼扯面,是一种知名传统风味面食。
方框绘制字符,也称作画线字符、伪图字符、制表符,广泛用于字符用户界面绘制框图与块图。
它们的样子大概是这样:“┐┑┒┓└┕┖┗┘┙┚┛├┝┞┟”

一、字体问题

本站有字体问题的事情我在年初就发现了,4月份的文章 使用 Linux Mint 作为主要操作系统的一些个人设置 也有讲过。

然而之所以一直拖到现在才搞定,主要是因为……

因为有一个我没有提到的问题,已经存在了 22 年之久了。

1. 微软雅黑中文省略号问题

中国人自小接受教育时就教过,中文省略号该怎么写?

「垂直居中、六点、占两个全角空格」

微软雅黑于1997年7月18日诞生,2006 年于 Windows Vista 中成为默认简体中文字体,2008 年发布 XP 版本。现在 Win10 最新版本为 6.25 ,说是严格遵照标准。

「那你告诉我中文省略号怎么写!」

snap2533

2. 除微软雅黑之外

macOS 的默认字体也是破的。

唯二的两个其省略号是正确的无衬线字体系列只有:文泉驿思源,前者目前内置于多数 Linux 发行版中,后者则以谷歌版本的形式存在于多数 Linux 发行版和 Android 系统中。当然,古董机是没有的。

二、目标

  1. 支持浏览时均使用系统自带且最佳的中文字体
  2. 中文标点「省略号」使用两个 U+2026,且垂直居中显示

支持平台:

  • Windows(支持最低版本为 7)
  • Linux(桌面发行版,以 Ubuntu 16.04 为准)
  • macOS Mojave(最低版本为10.14.3)
  • Android(最低版本为 7.1.2)

放弃的平台:

  • iOS 所有版本
  • 所有华为手机
  • 所有国产浏览器
  • 所有特供国产手机

三、准备工作

开发环境(硬件)

IMG_5026

1. 桌面测试环境

Windows 7 和 Linux 都是现成的。问题在于 Win10 和 macOS 环境。

我就知道有这么坑的一天,所以专门准备了一个 120G 的分区专门用做虚拟机。

但别忘了 Win10 和 macOS 这俩坑货不仅会自动更新,而且更新前后区别还很大。

Win10 初版自带的是雅黑 6.23,比 Win7 的 6.02 版本号大很多。

snap2529

snap2530

Win10 2017更新后变成 6.2.5。

snap2532

为了准备这俩破系统,我的硬盘就变成了这样:

snap2535

2. 移动端测试环境

安卓设备我手里最低版本是 4.4 的,但是研究了一下发现没有可行的解决方案,所以放弃了。

iOS 我能临时测一下的版本自称是 iOS12,没法检查其默认包含什么字体。

另外由于无法在手机上直接调试,还得专门用电脑连接手机进行调试。

Firefox 的话可以直接用 WiFi 进行调试,虽说很方便,然而 Firefox 的 Developer Tools 经常抽风,着实难用(不然谁还用 Chrome )。

snap20190722-171219

而且不知为何,在 WebIDE 中看不到手机屏幕,Inspect 是显示在手机上的。

snap2539

Chrome 的话就必须接 USB 才行。得开 USB Debug 模式,还得装 Android adb 驱动啥的。当然优点也是有的,就是可以在电脑上直接看到手机的屏幕。

snap2540

四、实现

snapd00

五、结论

目前主页和博客都已经实现了,接下来考虑在几个开源项目中也实现。

有个棘手的问题,text-overflow: ellipsis; 用的是单个U+2026,这里垂直居中就没那么好了。

之所以不考虑 iOS 设备,其一是因为没有调试环境,其二是 Safari 作为新时代的 IE6,谁爱折腾谁折腾去。我其实连 macOS 都懒得弄。

六、参考资料

中华人民共和国国家标准-标点符号用法(2011)
关于雅黑字体中文省略号的显示错误
CSS unicode-range特定字符使用font-face自定义字体
Fonts.css — 跨平台中文字体解决方案
Debugging Firefox for Android over WiFi

35 comments

Skip to comment form

  1. 云中君
    Safari 12.1.1 Safari 12.1.1 iPhone iOS 12.3.1 iPhone iOS 12.3.1
    Mozilla/5.0 (iPhone; CPU iPhone OS 12_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.1 Mobile/15E148 Safari/604.1

    字体是最麻烦的!

  2. Yan
    Google Chrome 75.0.3770.142 Google Chrome 75.0.3770.142 Mac OS X  10.14.5 Mac OS X 10.14.5
    Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

    呵呵呵……

  3. 心灵博客
    Google Chrome 75.0.3770.80 Google Chrome 75.0.3770.80 Mac OS X  10.14.5 Mac OS X 10.14.5
    Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.80 Safari/537.36

    哈哈,终于见到一个比我还较真的人了。(^-^)V

  4. Yan
    Google Chrome 75.0.3770.142 Google Chrome 75.0.3770.142 Mac OS X  10.14.5 Mac OS X 10.14.5
    Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

    严格意义上来,微软雅黑的双引号也是错的,“”,而不是类似英文的””!还有一大堆字体,包括Mac。豆瓣上现在流行什么『』和「」,真的是很不舒服……

    1. 石樱灯笼
      Google Chrome 75.0.3770.142 Google Chrome 75.0.3770.142 Windows 7 x64 Edition Windows 7 x64 Edition
      Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

      直角引号应该是源于日本的,因为日本的字体一直就是对的。直角引号只是个折中方案。
      微软和苹果的行为相当于一种文化破坏,比文化入侵要邪恶得多。
      不知道兄台是能忍受错误的,还是能忍受折中的

      1. Yan
        Google Chrome 75.0.3770.142 Google Chrome 75.0.3770.142 Mac OS X  10.14.5 Mac OS X 10.14.5
        Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

        呃,我都不能忍受,只是我比较懒,没有兄弟你那么执着的精神……往往也就折中了事。

      2. Yan
        Google Chrome 75.0.3770.142 Google Chrome 75.0.3770.142 Mac OS X  10.14.5 Mac OS X 10.14.5
        Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

        我用mac,为了引号“、”的问题,专门把字体设成了苹果已然弃用的Pingfang SC。不过也只能这样了。
        哦对了,不要看不起mac,mac里有个默认字体Hiragino Sans GB,源自日本,引号就是居中的。

        1. 石樱灯笼
          Google Chrome 75.0.3770.142 Google Chrome 75.0.3770.142 Windows 7 x64 Edition Windows 7 x64 Edition
          Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

          苹方的省略号也是沉底的,和华文一个德行。
          不是我看不起mac,研究过的话你就知道,日文的省略号,不论是微软还是苹果都是居中的,是微软和苹果看不起中国。
          既然你提到 Hiragino 了,也就是说你并没明白我的字体调整是如何实现的了。

          1. 老虎
            Safari 12.1.1 Safari 12.1.1 iPhone iOS 12.3.1 iPhone iOS 12.3.1
            Mozilla/5.0 (iPhone; CPU iPhone OS 12_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.1 Mobile/15E148 Safari/604.1

            没有没有,我明白你怎么实现的。我只是单纯的针对你的一(2)而言。

    2. 心灵博客
      Opera 12.14 Opera 12.14 Windows Vista Windows Vista
      Opera/9.80 (Windows NT 6.0) Presto/2.12.388 Version/12.14

      破折号其实也是同样的问题。

  5. Sam.Z
    Firefox 68.0 Firefox 68.0 Windows 10 x64 Edition Windows 10 x64 Edition
    Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0

    你不写我都快忘记省略号标准是垂直居中,电脑的应用时常改变着一些习惯,我现在手写字体也会反过来参考电脑上的……

    1. 心灵博客
      Opera 12.14 Opera 12.14 Windows Vista Windows Vista
      Opera/9.80 (Windows NT 6.0) Presto/2.12.388 Version/12.14

      和我一样,忘记了或者觉得有疑问就会参考电脑的,以为电脑上的就是标准的。

  6. 心灵博客
    Opera 12.14 Opera 12.14 Windows Vista Windows Vista
    Opera/9.80 (Windows NT 6.0) Presto/2.12.388 Version/12.14

    刚刚看到有人要和你反着来……

    Mac OS X Lion 的自带中文输入法省略号「⋯⋯」如何改为沉底的「……」?

    http://www.zhihu.com/question/19886400

    1. 石樱灯笼
      Google Chrome 75.0.3770.142 Google Chrome 75.0.3770.142 Windows 7 x64 Edition Windows 7 x64 Edition
      Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

      文化入侵大成功

  7. Yan
    Safari 12.1.1 Safari 12.1.1 iPhone iOS 12.3.1 iPhone iOS 12.3.1
    Mozilla/5.0 (iPhone; CPU iPhone OS 12_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.1 Mobile/15E148 Safari/604.1

    大家都是认真的了。生活中多少人全角半角都不分……有时候省略号打成…或者……或者。。。那真是太常见了。

    1. 大致
      Firefox 67.0 Firefox 67.0 Windows 7 x64 Edition Windows 7 x64 Edition
      Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0

      2014年之前我在单位都是只打半角标点。因为对于程序员来说,全角标点太讨厌了。直到后来我们用专门的机器编码。

  8. 大致
    Firefox 67.0 Firefox 67.0 Windows 7 x64 Edition Windows 7 x64 Edition
    Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0

    我觉得老外是故意的。
    因为省略号本身就不是中国历史上常规的标点,五四运动的时候才造出来的,仿照西方标点抄的。
    可能西方人觉得,不就是把我们的省略号加了一倍么,一回事啊。就给归到统一编码上了。制定标准的时候没好好争,后面再怎么打补丁都别扭。
    而且省略号的待遇已经很好了,各个输入法都是shift+6。
    间隔号【·】才是一脑门子官司。

    1. 石樱灯笼
      Google Chrome 75.0.3770.142 Google Chrome 75.0.3770.142 Windows 7 x64 Edition Windows 7 x64 Edition
      Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

      宋体楷体的省略号都是正确的,日语字体的省略号也是正确的。
      西方人到底怎么想的我们只能靠猜的,是不是故意的不知道,不过是完全不在意。

  9. 李军
    Safari 12.1.1 Safari 12.1.1 Mac OS X  10.14.5 Mac OS X 10.14.5
    Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.1 Safari/605.1.15

    腻害……

  10. 小石
    Yandex Browser 19.7.0.1635 Yandex Browser 19.7.0.1635 Windows 10 x64 Edition Windows 10 x64 Edition
    Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 YaBrowser/19.7.0.1635 Yowser/2.5 Safari/537.36

    ……,涨知识了,以前还得去复制粘贴一下

    1. 石樱灯笼
      Google Chrome 75.0.3770.143 Google Chrome 75.0.3770.143 Android 9 Android 9
      Mozilla/5.0 (Linux; Android 9; G8342) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.143 Mobile Safari/537.36

      复制粘贴有什么用?

      1. 小石
        Yandex Browser 19.7.0.1635 Yandex Browser 19.7.0.1635 Windows 10 x64 Edition Windows 10 x64 Edition
        Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 YaBrowser/19.7.0.1635 Yowser/2.5 Safari/537.36

        以前不知道怎么打省略号emmm直接搜个省略号复制粘贴

  11. 青山
    Google Chrome 69.0.3497.100 Google Chrome 69.0.3497.100 Windows 7 x64 Edition Windows 7 x64 Edition
    Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

    古时候没标点符号他们读的多好,现在有标点符号了,还多出那么多问题……

    1. 石樱灯笼
      Google Chrome 75.0.3770.142 Google Chrome 75.0.3770.142 Windows 7 x64 Edition Windows 7 x64 Edition
      Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

      “本人林大福将大树街石屋租于恩人黄老十一家未能报恩万一不交租亦可收回黄公年租银两三十万不能转租别人立此为据本人儿孙不得有违”

  12. zmmio
    Google Chrome 75.0.3770.142 Google Chrome 75.0.3770.142 Windows 10 x64 Edition Windows 10 x64 Edition
    Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

    咦,被你这么一说,好像真的中文省略号这个问题平时确实没注意,应该是居中打的.

  13. 小宝
    Google Chrome 75.0.3770.100 Google Chrome 75.0.3770.100 Mac OS X  10.14.5 Mac OS X 10.14.5
    Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

    微软雅黑还有一个我比较讨厌的就是软件UI界面布局的问题。Win8.1之后的微软雅黑让传统的Windows的界面UI变得特别硕大,尤其是一些按钮和菜单(office那个顶天立地的段落对话框),本以为是为了照顾触控设备所以把界面做大的,后面换了英文版界面发现没这个问题,界面布局也是正常的。

    1. 石樱灯笼
      Google Chrome 75.0.3770.142 Google Chrome 75.0.3770.142 Windows 7 x64 Edition Windows 7 x64 Edition
      Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

      Win8.1 雅黑引入的问题蛮多的,所以即使从 Win8 到 Win8.1 口碑逐渐变好,我也从来没有接受过 Win8 和 Win8.1 ,之后的 Win10 也是依旧如此。

      1. 小宝
        Google Chrome 76.0.3809.100 Google Chrome 76.0.3809.100 Mac OS X  10.14.5 Mac OS X 10.14.5
        Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36

        忘了说个事了,2017年的时候有消息说要出全新版微软雅黑,打算修复这些问题,是基于兰亭黑 Pro 那套字体做的,在某个测试版本出现过一次。但是都快三年了新字体还是迟迟不上位。真不知道微软是不是打算放弃掉本来就很糟糕的 Windows 用户体验了(微软现在的主要业务在 Office 和云计算 Azure)。

        1. 石樱灯笼
          Google Chrome 76.0.3809.100 Google Chrome 76.0.3809.100 Windows 7 x64 Edition Windows 7 x64 Edition
          Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36

          兰亭黑 Pro 本身就是骗人的玩意,微软就是受骗上当者之一。
          这年头还有人会觉得需要关心UE?都是吃屎长大的就不要谈论腹泻和拉稀的区别。
          (我从2015年开始做Web前端,亲眼目睹UE从帝位走向共和)

  14. Unee Wang
    Google Chrome 75.0.3770.144 Google Chrome 75.0.3770.144 Google Chrome OS x64 Google Chrome OS x64
    Mozilla/5.0 (X11; CrOS x86_64 12105.100.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.144 Safari/537.36

    你还这么仔细,我是根本不管的,甚至博客里的图片有些人看不到,我也不会管了

  15. 姜辰
    Firefox 60.0 Firefox 60.0 Windows 10 x64 Edition Windows 10 x64 Edition
    Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0

    ……省略号什么的,我记得word中打…..会自己到中间。= =、

    其实我一直想一个问题,windows怎么更换系统字体。

    1. 石樱灯笼
      Google Chrome 76.0.3809.100 Google Chrome 76.0.3809.100 Windows 7 x64 Edition Windows 7 x64 Edition
      Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36

      “windows怎么更换系统字体”,我谷歌搜了一下发现了漫山遍野的有效结果

  16. 齿轮key
    Firefox 67.0 Firefox 67.0 Windows 7 x64 Edition Windows 7 x64 Edition
    Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0

    像前面说的宋体的时候,省略号和间隔号【·】的长度倒是对的,所以更倾向认为是不重视,和现在大片的机器翻译一样,没把本土化做好,用本土的词都感觉是英式汉语。。
    而且大概因为简中不像繁中和日语一样,保留「直角引号」一类更适合中文这个天生等宽字体的符号,西化本来就更多,现在是变本加厉了,不过网络的发展本来就对标点不重视了,比如我现在省略号都是如上句结尾。

    不过不说真的忘了省略号是居中而非置底,在正式书写场合。。

    1. 石樱灯笼
      Google Chrome 76.0.3809.132 Google Chrome 76.0.3809.132 Android 9 Android 9
      Mozilla/5.0 (Linux; Android 9; G8342) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Mobile Safari/537.36

      直角引号亦是舶来物。

      1. 齿轮key
        Firefox 67.0 Firefox 67.0 Windows 7 x64 Edition Windows 7 x64 Edition
        Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0

        那所有标点都是舶来物啊,只是对于中文来说,认为直角引号比西式的引号更适合这个文字系统。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据