H5 Laya 字体

柔光的暖阳◎ 2022-03-26 02:54 265阅读 0赞

参考  
[网页字体Serif和Sans-serif的区别及浏览器字体的设置][Serif_Sans-serif]  
[CSS Font知识整理总结][CSS Font]

**1.Font-Family**

font-family 规定元素的字体系列。font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

`font-family: Times New Roman,"open-sans","幼圆",sans-serif`  
当浏览器显示一个字符时，会首先从Times New Roman中寻找这个字符，如果找到就用Times New Roman字体来显示这个字符。如果没找到就去open-sans中寻找，如果找到就用该字体显示字符，没找到就会依次寻找下去，如果在通用字体库sans-serif中也没有找到就会用一个缺字符代替（通常是小方框）。

有两种类型的字体系列名称：

*  指定的系列名称：具体字体的名称，比如："Microsoft Yahei"、"Helvetica Neue"、"arial"、"宋体"
 *  通常字体系列名称：比如："serif"、"sans-serif"、"cursive"(书写体，相当于印刷学中的手写体)、"fantasy"(梦幻体，相当于印刷学中的装饰体)、"monospace"(等宽字体，是指每个字符宽度都一致的字体)  
    注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。

font-family中有时候字体加引号有时候不加引号。区别在于对字体名称中空格的处理不同。不加引号时，忽略字体左右两端的空白字符，单词之间的空白字符被解释为一个空白字符。比如font-family: Times New Roman , sans-serif。被解释为font-family:Times New Roman,sans-serif。加引号时，需要保留引号内的所有空格。比如font-family:"Times New Roman",sans-serif。浏览器会去寻找“Times New Roman”这个字体。

**2.通用字体系列**

在font-family定义了通用字体后，若指定网页显示的字体系统中并不存在，浏览器就会根据设置的通用字体来以某种预先设置好的字体来显示。w3c建议在定义字体是最后以一个类别结尾，例如sans-serif，来保证不同操作系统下网页都能够正确显示。

**serif**

> serif  
> 英 \[ˈserɪf\] 美 \[ˈsɛrɪf\]  
> n.  
> 衬线体;衬线，截线（衬线指的是字体起始末端的细节装饰）

serif 是衬线字体，意思是在字的笔画开始、结束的地方有额外的装饰，而且**笔画的粗细会有所不同**。如西方字体中的Times New Roman、Georgia字体等，中文的宋体就属于这类字体。

**sans-serif**

> sans  
> 英 \[sænz\] 美 \[sænz, sɑŋ\]  
> prep.  
> 无，没有

sans-serif是无衬线字体，在笔画上没有多余的装饰，无衬线字体比较圆滑，**线条一般粗细均匀**。属于这类字体的如西方的Helvetica、Arial、Verdana，中文的黑体。

注：严格来说，衬线体与非衬线体是对于西方字体的区别，中文字体只是有着宋体、黑体、楷体、仿宋等风格之分，但是中文宋体与西方衬线字体在风格和应用场景上相似，也可以有衬线体与非衬线体之分。

![Image 1][]

衬线体与非衬线体的区别

综上所述，衬线字体适合小号文字的显示，如果使用非衬线字体要保证font-size足够大，以确保正文内容的可读性。11px下的英文推荐使用衬线字体，对于中文，无论如何都不推荐11px下显示。

二、常见问题

1.优先级  
参考[页面可用性之浏览器默认字体与CSS中文字体][CSS]  
凡是浏览器默认字体不起作用的页面都是在CSS中设置了中文字体的页面。

我们为什么要在body中设置font-family属性，其一就是在于统一，也就是所谓的兼容性，其二就是让英文字符更好看，“宋体”下的英文字符看多了会让人觉得蹩脚的……所以我们会设置font-family:arial; 或是font-family:Tahoma;这是需要的。对于中文站点，这类英文字体的设置依旧留下了中文的突破口。要知道，这些英文字体对中文文字的表现是没有影响的（这里仅指单纯的文字表现，对齐、下划线等问题不予考虑），英文字体仅对英文字体及一些字符有影响，中文字体依旧勃起，处于真空的裸露的状态，这种裸露直接裸给了浏览器，也就是说英文字体下的中文字体仅受浏览器的默认字体影响，于是这就牵涉到了一个页面可用性的问题。

有一部分用户，虽然是一小部分，但是他们喜欢使用自定义的中文字体，拿我身边的事情举例吧。我有几个同事就喜欢“微软雅黑”字体，他就是把浏览器的默认字体设成了“微软雅黑”。根据他的口述，在他看来，访问一个网站，发现这个网站的字体不是他自定义的字体，他会有些许的挫败感，如果一个网站可以接受他修改的字体，以“微软雅黑”的形式显示，其对这个网站的认同感也会提升。

不同的字体在对行高对齐方便都不统一，如果你页面设计的很紧凑按照紧密的像素进行布局，字体换了后可能会让页面错乱的，你可能又会说页面要照你的那种风格进行编写，高自由度什么的。但是企业办公网站不太试用，他们要的只是一个稳定的显示一致的页面，照你那么写，会有些时间浪费在测试上

2 .参考  
[如何优雅地定义 font-family?][font-family]  
[推荐！WEB中文字体应用指南][WEB]  
字体序列的问题其实一般并不常见，最糟糕的情况就是先定义中文，再定义西文，中文那套自带西文字体会让你感到难过，其次就像在 OS X 系统上将「华文黑体」定义在「冬青黑」或「苹方」之前.

3.参考[Tahoma Arial Verdana三种字体的选择][Tahoma Arial Verdana]  
Arial广为人诟病的一点就是i大写的问题，而在字体为12时，中文的样式、间距并无差别，所以我决定选择Tahoma作为我的主字体。  
另外值得注意的一点就是京东和淘宝都选择Verdana作为订单金额的字体，我觉得是非常合理的。  
因为订单的金额是非常重要的信息，Verdana的特点就是字间距较大，这样可以更为清晰。  
所以最终确定我的字体样式：  
通用 font-family: tahoma, arial, 宋体, sans-serif;  
金额 font-family: verdana;

4.[移动端WEB页面的字体][WEB 1]  
在网页中,视觉设计师们喜欢用微软雅黑作为中文字体进行设计，于是我们写页面的时候也定义 font-family 为微软雅黑，如果你写的是移动端页面发到线上后，你可能会发现字体根本不是微软雅黑。因为手机系统 ios、android 等是不支持微软雅黑字体。

三大手机系统的字体资料

*  ios 系统  
    默认中文字体是Heiti SC  
    默认英文字体是Helvetica  
    默认数字字体是HelveticaNeue  
    无微软雅黑字体
 *  android 系统  
    默认中文字体是Droidsansfallback  
    默认英文和数字字体是Droid Sans  
    无微软雅黑字体
 *  winphone 系统  
    默认中文字体是Dengxian(方正等线体)  
    默认英文和数字字体是Segoe  
    无微软雅黑字体

都不支持微软雅黑，有木有；想在移动端使用微软雅黑字体也是可以的，如下：

![Image 1][]

Paste\_Image.png

@font-face 定义为微软雅黑字体并存放到 web 服务器上，在需要使用时被自动下载。但是这样做：一来消耗用户的流量，二来对页面的打开速度造成了延迟；一般是不建议的。

我们再来看三大系统的默认字体截图，从左到右依次为 ios、android、windows phone;我们可以看出三种不同的中文字体和微软雅黑一样是无衬线字体，意思就是字体边缘无过多的修饰，而无论页面中使用哪种字体，肉眼很难看出它们的差异，对产品的体验几乎没有影响。所以综合来说在移动端网页还是尽量使用默认字体比较好。

5.不同浏览器差异  
参考  
[网站字体渲染！聊聊各浏览器下字体排版一致的问题][Link 1]  
[RD1016: 各浏览器对常用行内替换元素的 'baseline' 位置理解不同][RD1016_ _ _baseline_]  
[Firefox&Chrome默认字体的渲染差异][Firefox_Chrome]  
[不同浏览器与不同字体，默认 line-height 的表现差异][line-height]

在项目中，确实出现firefox的文本位置偏高  
参考  
[egret3.2.3在pc上firefox(50.1.0)上文本位置出现上移][egret3.2.3_pc_firefox_50.1.0]  
[为什么所有label文字都偏移了][label]  
[为什么所有label文字都偏移了续][label 1]  
[text不同浏览器，字体位置不同][text]

最终苦逼的解决办法：

export class BGLabel extends Laya.Label {
            protected createChildren(): void{
                super.createChildren();
                var onFireFox:boolean = Laya.Browser.userAgent.indexOf("Firefox") > -1;
                if(onFireFox){
                    this._tf.y += 5;
                }
            }
        }

三、Laya中使用

1.使用位图字体  
参考  
[位图字体的制作与使用][Link 2]  
[BMFont下载及使用教程][BMFont]  
[\[cocos2d-x\] --- 使用位图工具自定义字体][cocos2d-x_ ---]  
[Bmfont下载][Bmfont]  
[基本搞定了字体---ttf和fnt格式字体][---ttf_fnt]

位图字体只适用固定文字内容的地方，如果是用户发表或者其他不确定的文字来源，那就没法用了  
另外，改颜色可以参考[改变bitmapFont位图字体颜色的方法][bitmapFont]

*  PS修改 位图字体.png 的颜色，但是这样不灵活
 *  文本装入sprite，用颜色滤镜改变sprite颜色

注意，按照上述laya教程导出一张白字透明底的整图，再去做后期效果，不是很方便，毕竟美术有时要做多层效果。BMFont有ImageManager功能，可以将不同的数字单独做出复杂效果后，通过ImageManager导入后，再导出。

2.使用嵌入字体

> 首先需要说明的是，laya 默认用的是Arial字体。如果使用Laya.Font.defaultFamily = "NotoSans-Bold";更改默认字体，会导致之前使用默认Arial字体的界面发生文字错位

如果希望在IDE中能选择到自己想要的字体，可以更改laya.editorUI.xml。但是**无法在IDE中预览嵌入字体效果**，参考[如何在UI编辑器里改变默认的字体][UI]

a.不同字体格式  
参考[WEB.ttf .eot .otf .woff .svg字体格式介绍和兼容][WEB.ttf .eot .otf .woff .svg]

![Image 1][]

字体兼容性

TrueType (.ttf)  
[ttf与ttc,otf][ttf_ttc_otf]  
Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

EOT – Embedded Open Type (.eot)

嵌入字体格式(EOT)是微软开发的一种技术，允许 OpenType 字体嵌入到网页并可以下载至浏览器渲染，浏览器根据 CSS 中 @font-face 的定义，下载，渲染这种 .EOT 后缀的字体文件。这些文件只在当前页活动的状态下，临时安装在用户的系统中。

OpenType (.otf)

OpenType是一种可缩放字型(scalable font)电脑字体类型，采用PostScript格式，是美国微软公司与Adobe公司联合开发，用来替代TrueType字型的新字型。这类字体的文件扩展名为.otf，类型代码是OTTO，现行标准为OpenType 1.4。OpenType最初发表于1996年，并在2000年之后出现大量字体。它源于微软公司的TrueType Open字型，TrueType Open字型又源于TrueType字型。OpenType font包括了Adobe CID-Keyed font技术。Adobe公司已经在2002年末将其字体库全部改用OpenType格式。

WOFF – Web Open Font Format (.woff)

相对于 TrueType 和 OpenType ，WOFF(Web开发字体格式)是一种专门为了 Web 而设计的字体格式标准，它并不复杂，实际上只是对于 TrueType / OpenType 等字体格式的封装，并针对网络使用加以优化：每个字体文件中含有字体以及针对字体的元数据(Metadata)，字体文件被压缩，以便于网络传输，并且不包含任何加密或者 DRM 措施。包括 Adobe、 Lino Type、Monotype 在内的几乎所有主要的字体供应商都加入到支持 WOFF 的行列中来

SVG (Scalable Vector Graphics) Fonts (.svg)

顾名思义，就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体.svgz。SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML)，用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG可以使你设计的网页可以更加精彩细致，使用简单的文本命令，SVG可实现色彩线性变化、路径、自定义字体、透明效果、滤镜效果等各式常见的图形图像效果。

b.woff的体积明显最小，兼容性也不错，woff2暂时还不行  
参考  
[web font 终极解决方案][web font]  
[网页中导入特殊字体@font-face属性详解][font-face]  
[web字体格式及几种在线格式转换工具介绍][web]  
几种在线工具都试了一下，我上传的ttf是299kb，只有[fontsquirrel][]把woff压缩到25kb,其他几个工具都是130kb左右。但是，某些字体转不了，提示"Adobe has requested that their font Source Han Sans CN Medium Regular be blacklisted by the Generator. You will not be able to convert this font."不过我觉得真正原因是因为我传了otf格式的，ttf格式的就能转。

c.参考[LayaAir下TTF字体的使用方式][LayaAir_TTF]

比如我测试用了一个叫mb\_potatoesandpeas-webfont.woff的字体，我把这个文件重命名为cuixu.woff，然后在index.html中这样引用：

然后在Main.ts中这样写，只要保证font指向的名称与index.html中的font-family一致即可生效。

//加载嵌入字体
    private loadEmbedFont() {
        Laya.Font.defaultFamily = "cuixu";
        var text: Laya.Text = new Laya.Text();
        text.fontSize = 40;
        text.color = "#FF00FF";
        text.text = "阒";
        text.font = "cuixu";
        text.pos(-100, 100);
        Laya.stage.addChild(text);
    }

> 问题补充：  
> 以上方法在canvas模式下正常，webGL模式下无效，这个是因为在用到该字体样式的时候，ttf字体包还未加载完成。html下字体是否加载完成，没有办法抛出事件，laya也无法监听判断。  
> 替代方案：  
> 在字体正式使用前，提前加载一个字体，该字体的主要功能是用于提前启动被加载字体的加载，保证在项目中正式使用该字体样式的时候，字体包已经加载完成

这里我在使用的时候，偶现BUG。就是在外网，偶尔首页面会出现问号方框乱码，估计是加载字体太晚了。参考daohu网友所说：

> 很好用！感觉webGL模式下是首次使用ttf的时候才开始加载，所以建议在预加载其他图集资源的时候就创建一次ttf文字（当然得找生僻字当炮灰），这样等到其他资源加载完也顺利加载好ttf了，不然延迟1s后如果还没加载完是会悲剧的

如果是使用的时候才加载，那就得在图集资源加载前就去使用嵌入字体。

四、思源字体介绍

参考  
[思源黑体：开源无衬线中文字体][Link 3]  
[Google 和 Adobe 做了款免费中文字体，为什么大家惊叹了][Google _ Adobe]

![Image 1][]

image.png

2014年7月15号，Adobe 联合 Google 发布了一款开源字体：「思源黑体」，亦称Source Han Sans 或 Noto Sans CJK。**安卓5.0系统已内置此字体。**  
思源黑体是一款开源字体，用户可以在[GitHub Google Noto Font][]或者[GitHub Adobe source han sans][]上查看或建立分支，也可以在[Adobe Typekit][]上免费下载使用。

![Image 1][]

https://github.com/adobe-fonts/source-han-sans

注2：Noto Sans CJK版本或Source Han Sans版本的两中思源黑体没有任何区别，包括其英文部分。二者在系统中显示的名称为各自的英文名称，而不是“思源黑体”，这会造成一定兼容性问题。例如**一方在Word文件中定义字体为“Noto Sans CJK”的思源黑体，而在另一方的电脑里只安装了“Source Han Sans”的版本，那么程序依然会以找不到字体为由回滚对应内容到宋体。**

参考[思源宋体，如何评价，以及如何正确使用][Link 4]  
2017 年 4 月 3 日，Adobe 联合 Google 发布了思源宋体。思源宋体是 思源黑体 的兄弟字体，同样支持繁简中文、日文、韩文四种语言，同样包含七种字重，同样使用 OFL 自由授权，并在 GitHub 上开源。我国的常州华文字厂也参与了字体设计。思源宋体遵循 GB 18030 和通用规范汉字表，包含 8105 个规范字。

思源宋体对于汉文字体届的贡献完全不亚于思源黑体。

如果操作系统并没有合适的字体来显示对应的字符，它就会被显示成「豆腐块」。Google 希望通过让开源 Noto 字体家族覆盖所有 Unicode 字符的方式来彻底告别「豆腐块」的存在，而「思源」系列字体便是 Noto 字体家族针对**中文、日文和韩文（Chinese、Japanese、Korean，CJK）**的重要子集。之前的思源黑体是无衬线字体，而这次的思源宋体是衬线字体。

对比 macOS 系统内置的宋体，思源宋体不但字重更丰富，并且字面更大，易读性稍好。Windows 内置宋体直接负分出局。相比思源黑体这种非衬线字体，思源宋体更适合正式的文档，感觉更庄重。

![Image 1][]

思源字体支持七种字重

需要指出的是，由于思源字体由 Google 和 Adobe 联合开发并发行，虽说中文名称相同，但是并没有统一的英文名称。**Google 将思源字体归入旗下 Noto 字体家族，因此思源黑体的名字为 Noto Sans CJK，思源宋体的名字为 Noto Serif CJK；Adobe 将思源字体归入旗下 Source 字体家族，因此思源黑体的名字为 Source Han Sans，思源宋体的名字为 Source Han Serif。**这一点带来的影响随后说明。

思源字体也内置了西文，其西文部分使用的是 Adobe Source 家族字体，即思源黑体集成 Source Sans Pro、思源宋体集成 Source Serif。无论是 Google 还是 Adobe 发行的版本都是如此。

**在网页中使用中文字体一向比较困难，其中最主要的原因是中文字体往往体积过大，西文字体一般可以在百 KB 左右解决问题，而中文字体少则几个 MB，大则上百 MB，这样会严重拖慢网站的加载速度。**

参考[思源系列字体：技术价值高于艺术价值][Link 5]

2014 年，谷歌联合奥多比发布思源黑体的时候，掀起了汉文字体届的一场波澜；三年后，两大巨头发布衬线思源宋体。平面设计师从来没有体会过如此强烈的幸福感：思源系列字体是迄今为止唯一一款可以免费用于任何场合的“泛中日韩”字体。

你可能不知道字体也是收费的，但实际上，连 PC 上每天都和你打交道的微软雅黑都是不能随意使用的。你可以用它来设计毕业答辩 PPT，打印一篇你写给女朋友的蹩脚诗，但是不能用于公司的宣传文案，也不能用来打印餐厅的菜单。将微软雅黑用于商业用途时，微软不会找你的麻烦，但你切实侵犯了微软雅黑原作者——中国方正集团——的版权。

思源系列字体基于“开源字体授权”发布，这意味着你不但可以不受限地商业使用思源系列字体，还可以根据其源代码进行再次修改，并将修改后的版本免费分发，或捆绑到商业产品中。“思源”因此得名。

但是如果你把“开源、免费”当作思源系列字体的全部意义，那就大错特错了。谷歌和奥多比两大商业巨头，谁都不指着这套字体来赚钱。联合开发思源系列字体的最大目的，是抛砖引玉，为“泛中日韩（Pan-CJK）”字体提供一个良好的榜样。

为什么说思源系列字体是中日韩数字排印史上，最大的工程？

谷歌“Noto”计划有一个伟大的目标：No Tofu，消灭豆腐块。豆腐块是一种常见的排印错误：在一些操作系统中，无法显示的字符会变成“□”。Noto 计划是要设计一套覆盖所有 Unicode 字符的字体，而中日韩语言是实现“消灭豆腐块”最重要的一步。

end

作者：懒皮  
链接：https://www.jianshu.com/p/16513e7789ab  
來源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[Serif_Sans-serif]: https://angeltime.cc/archives/728.html
[CSS Font]: http://www.cnblogs.com/dojo-lzz/p/4375347.html
[Image 1]: 
[CSS]: http://www.zhangxinxu.com/wordpress/?p=874
[font-family]: https://www.zhihu.com/question/37593717
[WEB]: http://www.uisdc.com/web-font
[Tahoma Arial Verdana]: http://blog.csdn.net/jason_wzl/article/details/49047719
[WEB 1]: http://weibo.com/ttarticle/p/show?id=2309403948614769611925
[Link 1]: http://www.uisdc.com/website-font-rendering-process
[RD1016_ _ _baseline_]: http://w3help.org/zh-cn/causes/RD1016
[Firefox_Chrome]: https://div.io/topic/1012
[line-height]: http://laichuanfeng.com/study/line-height-diff-with-browers-and-font/
[egret3.2.3_pc_firefox_50.1.0]: http://bbs.egret.com/thread-24820-1-1.html
[label]: http://bbs.egret.com/thread-14011-1-1.html
[label 1]: http://bbs.egret.com/thread-14015-1-1.html
[text]: https://ask.layabox.com/question/6288
[Link 2]: http://ldc.layabox.com/doc/?nav=ch-as-1-2-5
[BMFont]: http://bbs.egret.com/thread-18452-1-1.html
[cocos2d-x_ ---]: http://blog.csdn.net/qiurisuixiang/article/details/8984288
[Bmfont]: http://www.angelcode.com/products/bmfont/
[---ttf_fnt]: http://www.cocoachina.com/bbs/read.php?tid=198184
[bitmapFont]: https://ask.layabox.com/question/2606
[UI]: https://ask.layabox.com/question/5766
[WEB.ttf .eot .otf .woff .svg]: http://blog.it985.com/6518.html
[ttf_ttc_otf]: http://www.xuebuyuan.com/719061.html
[web font]: http://jartto.wang/2016/09/04/final-solution-of-the-web-font/
[font-face]: http://www.cnblogs.com/moqiutao/p/5070463.html
[web]: https://blog.csdn.net/xiaolongtotop/article/details/8316554
[fontsquirrel]: https://www.fontsquirrel.com/tools/webfont-generator
[LayaAir_TTF]: https://ask.layabox.com/question/332
[Link 3]: https://www.septillion.cn/archives/576
[Google _ Adobe]: https://www.ziti163.com/Item/1828.aspx
[GitHub Google Noto Font]: https://github.com/googlei18n/noto-fonts
[GitHub Adobe source han sans]: https://github.com/adobe-fonts/source-han-sans
[Adobe Typekit]: https://typekit.com/fonts
[Link 4]: https://www.septillion.cn/archives/2560
[Link 5]: https://www.septillion.cn/archives/2802