Re: [-Fx-] Firefox 内建字型成像设定整理

楼主: t7yang (t7: 我认为这是一种背叛)   2016-04-03 22:00:01
这篇算是针对我之前的文章又做了一次补完
让文章的整体性更强,从内建字型成像设定说明
到字型选择、使用者样式解决泛东亚字型显示一致性
(目前只有做到中文部分,未来或许会扩充)
一次过整合在同一篇文章内
※ 引述《t7yang (t7: 我认为这是一种背叛)》之铭言:
针对这篇文章 #1J4fUnkT(Browsers) 讨论到完全偏掉(XD)的字型设定主题做了一些整理
原始文章:http://t7yang.blogspot.tw/2014/03/fx-font-render-settings.html
除了利用 Mactype 或 GDI++ 等成像软件来辅助字型的成像外,Firefox 其实也内建了字
型成像的选项供使用者调整。这些选项默认是停用的,知道的人可能相对较少,所以常常
就必须面临是否要放弃硬件加速来换 Mactype 成像的困境,但其实可以两全其美。
选项 说明及建议
gfx.font_rendering.directwrite.enabled
TRUE/FALSE 启用字型成像,必须启用后底下的设定才有效果
gfx.font_rendering.cleartype_params.pixel_structure
0 = Flat 像素结构,液晶萤幕使用1(RGB)
1 = RGB
2 = BGR
gfx.font_rendering.cleartype_params.gamma
2200 / 1800 Gamma 校正值,标准:Windows 2200、MAC 1800
gfx.font_rendering.cleartype_params.cleartype_level
0~100 ClearType 的强度,数值越高字越平滑,但也可能越模糊。
一般建议落在 50~80之间即可。
gfx.font_rendering.cleartype_params.enhanced_contrast
0~1000 对比度,数值越高越锐利,字也会越粗。一般建议落在
200~500之间即可。
gfx.font_rendering.cleartype_params.rendering_mode
0 = Default 成像模式,可以根据自己的系统反复尝试何种模式最舒服,
1 = Aliased 不须重新启动浏览器即可以看到效果
2 = GDI Classic
3 = GDI Natural
Widths 其中“Default”、“Natural”、“Natural
4 = Natural Symmetric”是不错的选择。某些电脑在选择
5 = Natural “Aliased”后接口文字可能会完全看不到。
Symmetric
gfx.font_rendering.cleartype_params.force_gdi_classic_for_families
字型名称 这个清单的字型会强制使用传统GDI的方式成像,
某些较适合使用GDI进行成像的字型可以加入这个清单
gfx.font_rendering.cleartype_params.force_gdi_classic_max_size
数字 强制使用传统GDI方式成像的最大大小,
应该跟上一个选项是连动的
gfx.use_text_smoothing_setting
TRUE/FALSE 开启平滑设定(用于 Mac 系统)
gfx.font_rendering.cleartype.always_use_for_content
TRUE / FALSE 对所有内容启用ClearType成像
browser.display.auto_quality_min_font_size
数字 决定在哪个字级以上使用高品质成像(注1、注2)
注1:http://kb.mozillazine.org/Browser.display.auto_quality_min_font_size
注2:https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering
基于篇幅的因素,更多细节说明请参考O2FP页面的[内建设定]->字型效果分类
O2FP传送门:https://goo.gl/bv6hW
参考来源:
http://blog.timshan.idv.tw/2013/06/howto.html
https://addons.mozilla.org/zh-tw/firefox/addon/anti-aliasing-tuner/
http://mikawaffle.blogspot.tw/2012/02/firefox.html
并加入部分个人的建议
测试 Firefox 版本:28 beta
除了自己开启 about:config 来敲敲打打之外,如果习惯使用图形接口来操作的话,也可
以安装Anti Aliasing Tuner。
https://addons.mozilla.org/firefox/addon/anti-aliasing-tuner/
字型的选择
除了成像的参数之外,其实中文世界中最大的阅读愉悦度的障碍其实来自于字型本身。因
为中文世界中非常缺乏高品质的字型(就算是付费的字型)。在作业系统上:
※各常见作业系统简单介绍
MAC:
有先天的“苹果基因”优势,很大程度的克服了浏览器中文字难看的问题。除了行之有年
“俪黑PRO”和“黑体 TC”外,也有一些使用者会偷渡使用品质更好的日文冬青黑体。
Windows:
直到微软在Windows Vista内建“微软正黑体”后,微软作业系统的使用才有一款比较好
看的无衬线黑体字型(最重要的是微软正黑体符合国字标准字体的规范。在此之前,不少
使用者偏好使用日文字型。
Linux:
一般来说文泉驿黑体是Linux 使用者的首选,但其实这款字型是修改自 Android 的
Unicode字型,并根据对岸的标准规范来修改的。
常见的中文无衬线比较可以参考这里。
※字型选择辅助图
非常在意字型符合国字标准字体

偏好无衬线字型

微软正黑体(Windows Vista+内建)

标楷体(Windows 内建)

偏好无衬线字型

微软雅黑(Windows Vista+内建)
SimHei(Windows内建,简体字型)
Arial Unicode MS(Windows 内建,有中文Unicode 字型)
明了体(Windows Vista+内建,日文字型,日语:メイリオ,英文:Meiryo

MSGothic(Windows内建,日文字型)
Yu Gothic(Windows内建,日文字型)
信黑体(付费中文字型)
一些 Windows 使用者甚至也会想办法取得MAC的中文或日文字型,并使用在Windows 系统
上已取得更好的视觉享受,再此就不多做讨论。
套用KillSerif Style补完最后的拼图
设定好文字成像之后,接着还必须处理浏览器以什么字型来显示。在萤幕显示的情况,
无衬线体的显示效果要优于衬线体,因此黑体或圆体这类无衬线体是较好的选择。
但Firefox本身并没有针对泛东亚使用者最佳化显示字型的设定。因为仅透过内建字型
设定并不能有效的让泛东亚字型的显示有一致性,就算开发团队解决了图示字型与
文字字型分离设定的问题,但并不因为使得泛东亚字型的设定变得可接受。
所以,目前仍需要借助外部的力量进行调整。KillSerif Style或许是其中一个
目前最佳的选择,仔细阅读它的使用指南,根据你的使用的浏览器进行设定,
搭配上述的内建设定,你应该可以取得最接近理想的显示效果。
KillSerif Style传送门:https://userstyles.org/styles/111687/killserif-style
中文字型的悲哀
从上图的“字型选择辅助图”可以清楚地看得出来,目前要找到一个符合“国字标准字体”
规范的无衬线字型,唯一的选择只有微软的“正黑体”,更别说“微软正黑体”
在经历了数代的更新之后仍存在许多问题(某些字在粗体显示时会在右边出现一个全型的
中文空格、多年来为人诟病的字重不够、显示小号文字时非常难看等),这也造成许多
使用者宁愿放弃符合国字标准字体的微软正黑体,而选择敌国的开放的文泉驿黑体。
除了是因为整个中文世界缺乏优秀的字型开发商(这个问题可能跟字型容易被流传在
网络上且华人社会较没有付费购买字型的观念有关),作业系统厂商也较不愿意投资在
中文字型的打造上(尤其台湾市场太小,多数使用者对字型要求与认识也不高)。
备注:
本文只是简单针对 Firefox 内建的字型成像选项做了一些简单的整理与介绍,
其中在字型的选择上着墨比较多的是以 Windows 使用者的观点出发。若发现任何错误
或不完整的资讯,欢迎纠正和补足。
整理完后发现文章好像真的太长了,需要关照一下懒人
1. 按照每个设定调整,通常有给建议值是什么。gdi_classic的部分如果不需要就放著
不需要管。很多人喜欢文字要够黑,关键就在对比提升的数值,越高就越粗。
2. 安装Stylish套件
3. 安装KillSerif Style。仔细阅读相关的使用指南,主要是内建字型设定,把对应的
字型设定到KillSerif Style中(如果是默认的微软正黑体就不用设定)
4. 享受你的Firefox带来的视觉飨宴
Q: 有没有更懒的方法?
A: 有,直接安装 Anti Aliasing Tuner,内建成像设定那部分直接有图形接口。
Q: 还是很麻烦,有没有更懒的方法?
A: 有,买一台尊爵不凡的MAC,然后望向我们这群还需要自己手动调整的使用者说:鲁蛇
作者: jmlntw (吉米林)   2016-04-03 22:08:00
我已经放弃在 Windows 上追求好看的字型这件事了 XD用 Linux 的话倒是全部统一成思源黑体
作者: hsparrot (飞高高)   2016-04-03 22:16:00
放弃之后,海阔天空。微软正黑打遍无敌手!
楼主: t7yang (t7: 我认为这是一种背叛)   2016-04-03 22:25:00
这也是无可奈何的事情WIN底下OTF好像怎么都不好看倒是真的用FX内建的成像参数调整后浏览器的文字就会很好看够黑够粗,除了正黑体原生的那些鸟BUG外,真的已经很棒了
作者: mayuyu ((・ω・)ノ)   2016-04-03 23:27:00
推内建渲染(DW)参数+stylish 虽然还是比MacType渲染淡一点不过日常看起来已经不会觉得线条破碎或者是太模糊http://i.imgur.com/hbrXHSg.png
楼主: t7yang (t7: 我认为这是一种背叛)   2016-04-03 23:34:00
ma大这接口改动颇大啊(笑)而且看起来是用droid sans家族或衍生。话说directwrite有没有中文翻译?
作者: WFXX (各种婊人的新注音)   2016-04-03 23:38:00
有安装mactype本篇还有用吗? 还是说不冲突?
楼主: t7yang (t7: 我认为这是一种背叛)   2016-04-03 23:39:00
记得以前有办过一个Opera接口分享的活动,现在转用FX好像应该也来办一场 XD有安装mactype的话,跟内建成像的功能应该就重复了可以直接跳到killserif style那里把中文字型一致性的问题解决就好了
作者: WFXX (各种婊人的新注音)   2016-04-03 23:43:00
感谢大大热心回应QAQ 利马试试看
作者: hohiyan (海洋)   2016-04-04 00:22:00
信黑体不符合国字标准字体啊? @_@
作者: mayuyu ((・ω・)ノ)   2016-04-04 00:28:00
@t7yang大 接口因为原本的矩形分页用习惯了所以一直没有换成Australis的弧形分页(我是用CTR回复的,再参考userstyles改成有点Metro的样子)字型是夏夏制作“花明兰秀月”,是从明了体和兰亭黑修改来的,可能有些习惯上的不同会觉得怪怪的,例如标点符号、旧字体的问题,不过阅读起来还蛮清楚的,所以阅读的时候为了省力我都选择这个字体。directwrite好像没有中文翻译耶,我也不知道要怎么翻比较像hinting也是找不到传神贴切的翻译,就直接用hinting xDD
作者: tsukiyo99 (OωO)   2016-04-04 01:03:00
想问mayuyu大大 花明兰秀月会有缺字的情形吗
作者: oversky0 (oversky0)   2016-04-04 01:22:00
教育部有标准宋体、楷书、隶书字形档。http://is.gd/nqxGFUCNS 之前也有出宋体、楷书,不知和教育部的一不一样。
作者: mayuyu ((・ω・)ノ)   2016-04-04 01:24:00
很少遇到缺字 应该包含大部分正体中文、简中、日、韩文字(注意有些日文汉字的写法是错误的 台中日的汉字写法不同即使是号称标准字型的写法都不完全正确所以花明兰错得不算离谱但是如果你要学习标准汉字写法 就不能参考这个字体建议拿来阅读使用就好)如果真的遇到缺字 用t大的KillSerif Style样式的话即使有缺字也可以用第二顺位的字体补上src: local(" "), local("Microsoft JhengHei");第二顺位就是微软正黑体("Microsoft JhengHei")你可以在前面或后面自己加替补的字体
楼主: t7yang (t7: 我认为这是一种背叛)   2016-04-04 01:26:00
@hohiyan: 信黑体的作者是香港人,他完全没有必要根据台湾教育部的规范走。而且要辨识是否符合很简单,找一个艸部的字一看就知道 http://www.vmtype.com/img/02.png@其实Droid Sans本身是不错看,用在萤幕显示上很棒,只是只是对它的标点符号和一些字的写法不是那么习惯所以才没有用,在WIN底下正黑体还算堪用。@mayuyu大
作者: hohiyan (海洋)   2016-04-04 01:35:00
原来如此。是我误会了,我一直以为字体作者是台湾人 XD
楼主: t7yang (t7: 我认为这是一种背叛)   2016-04-04 01:37:00
这个误会还真大(笑
作者: mayuyu ((・ω・)ノ)   2016-04-04 01:55:00
@t7yang大 Droid Sans真的蛮好看 不过我没试过在Win底下渲染看起来怎么样@tsukiyo99大 这个字体可能不好找 我补一下连结无衬线 黑体 花明兰 ver.6.1(修改了明兰终部分旧字体比较符合现代阅读习惯)http://is.gd/o9ddcX如果你需要等宽字体 要下载明兰终 另外用里面的MingLan_Mono来搭配花明兰如果你需要分别清楚,容易辨识的英数字来阅读程式码例如区分O和0 要下载明兰终 用里面的MingLan_Code明兰终 http://is.gd/91GO9j衬线 明体 秀月(完整的名称其实是花秀‧月明,花秀月明)http://i.imgur.com/ifuhq7b.gifhttp://i.imgur.com/q982ZWS.gifhttp://i.imgur.com/AYwbOjq.gif花秀月明 ver.3.1 http://is.gd/4nbREn二个合起来 一个用在衬线 一个用在无衬线简称为“花明兰秀月”
作者: tsukiyo99 (OωO)   2016-04-04 02:08:00
@mayuyu 好的 我再试试看阅读效果 感谢
楼主: t7yang (t7: 我认为这是一种背叛)   2016-04-04 03:09:00
@mayuyu大: 喔,我还以为你的用的字型是droid sans衍生的因为那个标点符号看起来好像。1google了一下mayuyu大推荐的字型,也找到了一篇旧文,似乎是对岸网友制作的,撮合了好几个字型而成。不考虑这些字型是否可以合法使用或重制的情况下。也算相当有毅力。
作者: mayuyu ((・ω・)ノ)   2016-04-04 08:16:00
对啊 是夏夏做的 他是旧字体(康熙字体)的爱好者所以明兰用了很多旧字形 是旧体字的写法有些人认为旧体字保留较多的汉字的字理 也比较美观所以不少人还是坚持用旧字体 但是好看的旧字体很少而明兰是少数保留旧字体而且又好看的黑体不过明兰也不全是康熙字体的写法 有些是更旧的写法可能夏夏有自己的字理见解 有些人可能会觉得不适应而通常这种混合字体会有整体风格不统一字距高低笔画粗细参差不齐 设计构造粗糙不成熟的问题不过明兰很奇蹟的竟然修改得很和谐、很好看w尤其是正体中文、简体中文和日文三种字混合一起出现的时候明兰看起来融合得非常完美 非常的整齐不过有些汉字的写法对于现代标准来说是错误的或者说很少在使用的由于明兰把许多当用汉字都替换成了旧字体所以不适合拿来学习现代标准的写法不过因为我也喜欢旧字体 所以我觉得看起来特别舒服xD抱歉占用篇幅再补充一下在Fx用KillSerif Style+明兰的时候 样式里面@font-face {font-family: "Arial";unicode-range: U+4E00-9FFF;font-weight: 400;src: local("H-MingLan-Regular");} 的后面要再加上一段@font-face {font-family: "Arial";unicode-range: U+00-024F;font-weight: 400;src: local("Arial");} 还有对应的粗体那边也同样加上unicode-range: U+00-024F;src: local("Arial Bold");不然有些网页排版会乱掉 例如雅虎奇摩拍卖
楼主: t7yang (t7: 我认为这是一种背叛)   2016-04-04 08:39:00
3其实写法的部分有些太细节的,在阅读时基本上是观察不到的。毕竟人类在阅读时是用扫描,以前做过实验,用一些安插了倒序的词汇的文章给受试者阅读,多数都不会发现文章有异样(笑)。只是标点符号就真的很显眼,然后我又很在意(应该说我比较喜欢台湾的写法,完全置中,而不是像中日韩这样在角落),所以这就是为什么我没办法接受一些网络流传很广很多人用的黑体。如果可以学会如何修改字型,我应该会自己修改吧,只是目前完全没碰过,不知道怎么下手。不然想日本不少思源的衍生黑体和圆体其实也不错看。 00-024F看起来似乎是蛮前面的,这段应该没有影响到才对。知道是什么问题造成的吗?如果是CSS程式码可以排除的问题就应该修正一下。 花了一点时间做了一个小工具,自动连推格式书签小工具,有兴趣的人可以尝试一下,看看有没有问题。https://github.com/t7yang/autopushlet/releases/
作者: hohiyan (海洋)   2016-04-04 11:21:00
我说麻友友跟t7你们两个就应该直接各回一篇文啊 XD
作者: mayuyu ((・ω・)ノ)   2016-04-04 12:15:00
@hohiyan 一开始没想到会写那么多行 结果越写越多orz排版乱掉只有使用明兰字型的时候会遇到所以只有用明兰的时候需要加上 一般人不会用到所以我只是在这里顺便提一下 如果有试用明兰字型的话记得一定要加在后面才有效 chrome没有这个问题所以不用加字型修改替换可以用FontForge 我记得有板友也是不满意明兰的标点符号位置所以有自行修改 我习惯了所以没感觉w感谢制作连续推文的工具 这样以后要霸占推文就更方便了xD>< 在BBSFox底下不能用
楼主: t7yang (t7: 我认为这是一种背叛)   2016-04-04 23:08:00
1嘿啊,我有写在使用限制里面。这点可能跟BBSFOX本身有一些限制有关吧?我还不是很清楚,console log有跳一些讯息出来,但不是很确定是什么问题。目前只能先切换到其他分页再点书签小工具。等输出好格式化的文字后复制并回到BBSFOX贴上。因为不是高手,所程度只有这样(笑
作者: ettoolong (ettoolong)   2016-04-05 19:13:00
BBSFox 有内建一个自动连推的工具, 但是很阳春.征人来帮忙改善啊.
楼主: t7yang (t7: 我认为这是一种背叛)   2016-04-05 21:30:00
@_@,没发现过有内建连推的功能。下午有玩了一下FX的套件开发环境,webextension目前提供的api好像还是太少了jpm的话,才想要指定浏览器位置就一直不成功,就搁置了
作者: ettoolong (ettoolong)   2016-04-06 00:23:00
内建的推文工具: https://goo.gl/2wcc52
作者: goldie (阿良)   2016-04-10 19:40:00
未看先推!
作者: MilchFlasche (实践才能发光)   2016-04-20 23:48:00
推认真

Links booklink

Contact Us: admin [ a t ] ucptt.com