微软
【CSS】font-family的相关字体设置
2023-10-24 22:00

【CSS】font-family的相关字体设置

大家都知道,在不同操作系统、不同游览器里面默认显示的字体是不一样的,并且相同字体在不同操作系统里面渲染的效果也不尽相同,那么如何设置字体显示效果会比较好呢?下面我们逐步的分析一下:

一、字体基础知识

css 中的font-family

对于 CSS 中的 font-family 而言,它有两类取值。

在中,定义了 5 个通用字体族名(其中用的最多的就是衬线字体和无衬线字体):

serif 衬线字体族sans-serif 非衬线字体族 等宽字体1688库移动站,即字体中每个字宽度相同cursive 草书字体fantasy 主要是那些具有特殊艺术效果的字体

而在中微软640xl怎样设置字体,新增了4个通用字体族关键字(其中用的最多的是system-ui):

serif(衬线字体) & sans-serif(无衬线字体)

Serif的意思是,在字的笔划开始及结束的地方有额外的装饰,而且笔画的粗细会有所不同。衬线字体的风格都比较突出,常见的衬线字体有Times New Roman、宋体。

Sans Serif字体没有这些额外的装饰,笔划粗细大致差不多,字形端庄,横平竖直【CSS】font-family的相关字体设置,常见的无衬线字体有Tahoma、Verdana、Arial、、苹方、微软雅黑等等。

system-ui

简单而言,font-family: system-ui的目的就是在不同的操作系统的 Web 页面下,自动选择本操作系统下的默认系统字体。

默认使用特定操作系统的系统字体可以提高性能,因为浏览器或者 webview 不必去下载任何字体文件,而是使用已有的字体文件。

font-family: system-ui字体设置的优势之处在于它与当前操作系统使用的字体相匹配,对于文本内容而言,它可以得到最恰当的展示。

看看system-ui的兼容性,(图片截取日 ):

二、常见字体介绍

苹果系统支持的一种西文无衬线字体,是苹果生态中最常用的一套西文字体。 Neue是字体改善版本,增加了更多不同粗细与宽度的字形。

Arial

是为了与竞争而设计的无衬线西文字体,表现形式和类似,在不同系统的浏览器都支持,兼容性非常好。

Tahoma

一种无衬线字体,间距较小,在不同系统的浏览器都支持,兼容性良好,可以解决和Arial所为人诟病的缺点,比如大写的 I 和小写的 L 难以分辨。

San

苹果于2017年推出一种无衬线字体,也是目前苹果系统的默认西文字体,相比于字体,San 的字体风格更加简洁,减少了一些修饰的细节,支持符号的整体居中,比如时间显示,之前的的冒号是不居中的。

最低兼容版本:ios9、macOS10.11

SC(苹方-简)

苹果专为中国用户打造的一个中文无衬线字体,在2017年和San 一起推出,SC代表简体,同时还有台湾繁体和香港繁体,整体造型简洁美观,是苹果系统默认的中文字体。

最低兼容版本:ios9、macOS10.11

Sans GB(冬青黑体)、Heiti SC(黑体)

苹果系统中较早的中文无衬线字体,为了兼容旧版macOS系统,我们一般用它们作为苹方字体的。

Segoe UI

windows系统下的一种无衬线西文字体,也是windows系统的默认西文字体。

YaHei(微软雅黑)

Windows系统默认的中文字体,也是一套无衬线字体。macOS上的浏览器大都预装微软雅黑,但不包括safari浏览器。

ios和android系统不支持微软雅黑,所以设置移动端字体时可以忽略微软雅黑。

SimSun(宋体)

一种中文衬线字体,windows 和 macOS都有支持,字体偏瘦,风格明显。

宋体也是windows XP及更早系统的默认中文字体。

Micro Hei(文泉驿微米黑)

Linux系统下默认中文字体,一般为了兼容Linux系统才会设置这个字体。

Roboto

Android系统的默认西文字体微软640xl怎样设置字体,也是一种无衬线字体

Noto Sans (思源黑体)

Android系统的默认中文无衬线字体,由google推出的一款开源字体。

Apple Color Emoji

苹果产品的文字表情,在Mac和iOS系统中到处都可以看到,也是我们接触的最多的Emoji表情。

Segoe UI Emoji

系统中的Emoji表情,黑描边风格,没有苹果的圆润和质感。

Noto Color Emoji

Google推出的表情,和苹果的较为类似,更加扁平。

三、浏览器默认字体 PC端

PC端的浏览器支持设置不同的默认字体。

下图是chrome的配置选项,标准字体就是默认字体,当font-family属性没有设置时会启用这个字体。

因为Arial是西文字体,对中文无效,浏览器会选择合适的中文字体,在Windows上一般为微软雅黑,在macOS一般为苹方。但是部分浏览器会根据默认字体的风格选择近似的中文字体,Arial是无衬线字体,浏览器也会选择一种无衬线字体适配中文,如果默认字体是衬线字体,那么浏览器就会选择一种衬线中文字体,为了抹平这种差异,我们通常在font-family最后设置sans-serif指定无衬线字体作为兜底。

移动端

移动端浏览器通常不支持指定默认字体。

ios的默认中文字体为苹方,当lang设置为zh-CN,西文也是苹方。当lang不设置或者设置为en时,西文默认字体为Times New Roman,一种衬线字体。


'zh-CN'>
...

android的字体稍微复杂,它的的默认字体为西文:Roboto,中文:Noto Sans (思源黑体),但不同厂商可能会使用自定义的字体,比如小米部分手机使用的是小米兰亭。

android端lang设置为zh-CN或en时表现也有可能不同,虽然都是无衬线字体,但差异很明显。即便lang都设置为zh-CN,不同的安卓机上的默认西文字体表现也有可能是不同的,一个字形容:乱。

以上提到的移动端系统版本:ios9+ +

正是由于浏览器默认字体的复杂体现出设置font-family的重要性。

四、各平台的默认字体 1、Window下: 2、Mac OS下: 3、Android系统: 4、iOS系统: 5、Linux: 五、选择字体需要注意的问题

1、字体的中英文写法:

我们在操作系统中常常看到宋体、微软雅黑这样的字体名称,但实际上这只是字体的显示名称,而不是字体文件的名称,一般字体文件都是用英文命名的,如SimSun、 Yahei。在大多数情况下直接使用显示名称也能正确的显示,但是有一些用户的特殊设置会导致中文声明无效。

因此,保守的做法是使用字体的字体名称(英文)或者两者兼写。如下示例:

font-family: STXihei, "Microsoft YaHei";
font-family: STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑";

【本文来源于互联网转载,如侵犯您的权益或不适传播,请邮件通知我们删除】

发表评论
0评