德州计算机短期培训 为何网页无法显示不同的中文字体?

  • A+
所属分类:计算机培训

网站中文字体并不像英语字体有么那多选择。中文网站最常犯的错误就是用错中文字体。以下例子比较两个网站,一个是 BBC News 中文网站,一个是本土谜米 News 网站。平台是 Windows 8.1 英文版上执行 Chrome 浏览器,当两者并排比较,你很容易发现 BBC News 中文容易阅读得多,主要原因是字体。充分说明这个问题,我们需要谈些历史。

德州计算机短期培训 为何网页无法显示不同的中文字体?
德州宁津计算机短期培训

中文编码问题
电脑储存数据以字元 Byte 为单位。每个字元值有 256 个变化,足够代表英语系中的不同字母。电脑系统中文化始于上世纪八十年化初。最初是台湾人在英语操作系统上创建出来,利用两个字元代表一个中文字。因为第1个字元的第1位被设置为1作为中国字符主导字节,理论上二字元代码可以代表 32767 个不同中文字。那个二字元代码代表那一个中文字就是所为编码 Encoding,出名的中文编码有 Big5, CNS11643。日本韩国大陆都先后采用类似方法扩展英文电脑支援日文韩文简体中文。问题是这同一个两字元代码在不同语文操作系统上代表不同字型。资料交换会引起问题。统一码 Unicode 在上世纪九十年代提出就是为以解决语言间兼容问题,统一码对于每个不同的字形 Glyph 分配一个唯一的代码。随著千禧年后新操作电脑及移动设备都兼容统一码。语文兼容问题彻底解决。随著统一码的普及,互联网亦进化成可以支援统一码。如果网页内容是支援统一码。页内的描述是:

网站中文字体

网站中文字体问题

何谓无衬线 Sans 和有衬线 Sans Serif 字体
BBC News 中文显示用的是微软正黑体,而谜米显示所用的是新细明体。前者微软正黑体约略始自 2008 年,是 Windows 7 以后的微软视窗繁体版的标准系统字体 (System Font),如果安装的视窗不是繁体版亦可以透过视窗更新 Windows Update 下载繁体语言包而自动安装。

微软正黑体

后者新细明体约略始自 1993 年,字体来自台湾华康科技 Dynalab,是视窗 95, Me , XP 繁体版的标准系统字体。台湾华康是第一家将中文字拆成笔划 Stroke 储存,再在输出时进行实时重组的字型开发公司。

新细明体
两者主要分是前者是印刷术 Typography 所谓无衬线 Sans 类字体,指笔划起始至收结都是平顺,后者是指笔划起始至收结以衬线加重了,造成类似书法的起角漂亮效果,但是这漂亮效果不适合于在字体小时显示。英语世界最出名的 Sans 字体是 Helvetica (亦即是类似的 Arial) 而 Sans Serif 就是 Times Roman. 因为字体名称是受版权保护的,由于要解决排版兼容问题,不同的字体厂商会设计相似的字体,但配以不同的字体名称。

何谓粗体
明体 (或内地称为宋体) 是以前中国刻版印刷最常用字体,横划和竖划比例一般为 1 比 2,当比例变大,如横竖比为 1 比 3 时被冠名为粗明体。黑体本身是横直比例一致,当笔划加粗后被冠名为粗黑体。
网站中文字体
两者主要分是前者是印刷术 Typography 所谓无衬线 Sans 类字体,指笔划起始至收结都是平顺,后者是指笔划起始至收结以衬线加重了,造成类似书法的起角漂亮效果,但是这漂亮效果不适合于在字体小时显示。英语世界最出名的 Sans 字体是 Helvetica (亦即是类似的 Arial) 而 Sans Serif 就是 Times Roman. 因为字体名称是受版权保护的,由于要解决排版兼容问题,不同的字体厂商会设计相似的字体,但配以不同的字体名称。

几十年前印刷排版 (字粒年代) 都喜欢用明体作内文字体,直到上世纪八十年代 Desktop Publishing 兴起印刷革命, 印刷技术大幅改进,报纸排版输出到达解像度 1200 dpi, 开始有人更广泛使用黑体作内文字,最出名是当年香港信报。内文字除了要求小字时要显示清楚 (所以正常情况不会使用粗体字),用什么字体作内文很多时后是一种文化上的约定俗成,如几十年前中文印刷多采用明体,随著互联网普及,更多采用黑体,但换了是日本,普遍采用的是圆体,圆体据说源自写研(しゃけん)株式会社的创作。

圆体
例如,我的 Au Lsai LG24 手机标准系统字体是圆体,并且中港台常见是黑体。

外框字 Outline Font 和点阵字 Bitmap Font
电脑上显示文字其实都是一个一个的点阵 Bitmap,最初几十年前解像度低时,例如在 96dpi 输出时,一般字体是 24 x 24 点阵, 就是 1/4 吋高。细看下你可以看到屏幕上字的每一个点。今天我用的手机是 300 dpi 以上, 同样 1/4 吋高的字中包含了 75 x 75 点以上,你再不能分辨其中的每一个点。

点阵字

但技术是随时间进步,并非一步登天,在低解像度的年代要在 24×24 点阵内清楚显示“鱼”字已不容易,更莫说是更复杂的字如“鲈”。所以当时的做法是每套字体要配应不同的点阵,例如 16×16, 24×24, 32×32, 48×48, 72×72, 当程式要求的大小不在预设范围内时只能找最接近的点阵放大或缩小, 例如要 28×28 时利用 24×24 放大或 利用 32×32 缩小。效果当然不理想但亦是无可奈何的做法。

后来 Adobe 发明了外框字体 Outline font 技术,每个字体以一连串数学公式表达,再通过实时呈现将外框转成点阵,从此当应用程式要大字时,例如 128×128 点,无需以下级点阵放大而直接由外框输出,达到笔划平顺。

外框字

当小字时如果直接由外框通过实时呈现输出,笔划会挤在一起,Adobe 的做法是引入 Hinting 技术, 就是 Adobe Type 1 Font 技术, 后来的 Truetype 就是 Apple 为了不被 Adobe 这项专利技术锁死而独立开发的相类似技术,原先是用于屏幕显示,慢慢结合桌面电脑日趋强大的运算功能,最后最代 Adobe Type 1 的地位。

中文外框字容量问题
中文外框字的缺点是容量大,一套字体动辄 10MB. 这在今天算不了什么,但在 20 年前普遍硬盘只有 20 MB 时就不得了。所以当交换文件时,如果收件人系统内没有发件人的字体,系统就会以默认字体取代显示。

字体替换 Font Substitution
桌面印刷始于上世纪八十年化。由于印刷排版系统需要不同字体,而字体是要付钱授权,所以当一份文件在另一台电脑打开时,有可能原来文件中要求的字体在这台电脑中没有,与其将段文字留空,一个更好的做法是自动在电脑中找最适合的字体代替。在互联网时代,浏览器会跟据网页要求的字体尽量配合显示,例如如果设定使用微软正黑体,在 Windows XP 或 Mac 机上由于没有微软正黑体,浏览器会尝试最配对的字型(就是其他黑体),如果都没有找到,就用默认系统字体,如在 XP 上是新细明体。这就是我们所说的字体替换 Font Substitution。问题是文件的外藐跟原来的不一样。

由于字型名称是多语言,在繁体名为微软正黑体在英文视窗下的名字是 Microsoft Jhenghei. 所以在 CSS 中我们应该利用 font-family 设定字体替换的顺序时输入字型的中英文名。谜米 News 是方法有问题,因为它的样式 Stylesheet 表仅包含英文字体,中文显示时让浏览器和机器自由随意替换的字体。在我的情况下,抓住一个不好的新细明体字体!当然,在移动设备中,这不是一个问题,因为大多数移动装置只配备了谷歌黑体。

meme-css

字体替换是以编码操作。比如 CSS 中是:

font- family:”Avant Garde”, “Microsoft Jhenghei”, sans;

英文会以 Avant Garde 显示,中文时,由于 Avant Garde 不支援中文编码,依次找 Microsoft Jhenghei, 中文显示以微软正黑体。但如果 CSS 是:

font- family:”Microsoft Jhenghei”, “Avant Garde”, sans;

由于 Microsoft Jhenghei 中亦技援英语编码,中英文都会以微软正黑体显示。

WebFont
而英语世界提出的解决字体替换问题方案就是免费的 WebFont. WebFont 是存在互联网伺服器。网页文件会指示出 WebFont 存在的伺服器域名。当浏览器解读网页文件时发现电脑中缺乏字体时可连接到 WebFont 伺服器下载使用。

但 WebFont 不是解决中文字不存在的有效方法。理由是:一) 中文字体动辄是万多个字。一套字体随时 10 MB,下载需时。二) 中文字体开发投入资源庞大,免费下载差不多可能,授权费用很难操作。有一些技术是将网页中所需的字元 (不是整套字体) 变成 Javascript 算式下载。做法是解决了中文字体下载量大的问题,但亦引起了其他问题,例如算式内容不利搜寻引擎优化。

学习计算机、互联网技术,参加学习网站优化培训,就找顾图南老师



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: