关于font-family的用法

2022-07-01 分类：网站建设

先来看几个大的电商网站字体设置：

淘宝网

font: 12px/1.5 tahoma,arial,’Hiragino Sans GB’,
’\5b8b\4f53’,sans-serif;

京东

font: 12px/1.5 Microsoft YaHei,tahoma,arial,
Hiragino Sans GB,\\5b8b\4f53,sans-serif;

新浪微博

font: 12px/1.3 ’Arial’,’Microsoft YaHei’;

知乎

font-family: ’Helvetica Neue’,Helvetica,’PingFang SC’,
’Hiragino Sans GB’,’Microsoft YaHei’,Arial,sans-serif;

小米官网

font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,
"Microsoft Yahei","Hiragino Sans GB","Heiti SC",
"WenQuanYi Micro Hei",sans-serif;

注： Hiragino Sans GB一种简繁结合的字体样式

这里没有列出查看的所有平台，通过总结，有以下几个共同点：

1.大部分font-family设置都以"sans-serif"、"serif"结束；

淘宝京东等网站都以"sans-serif"结束字体设置，根据w3c中描述

有两种类型的字体系列名称：
指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。

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

2.常用英文字体有：arial,tohama，常用中文字体有
：宋体、微软雅黑、Hiragino Sans GB

注：淘宝网和京东使用unicode编码"\\5b8b\4f53"（宋体）是在一些
情况下直接写中文字体名称会编译不出来，所以直接使用unicode编写格式。

arial&tohama&verdana字体比较

字体大小为12px时：

Arial 字体的样式 ZITIdeyangshi 123456789
Tahoma 字体的样式 ZITIdeyangshi 123456789
Verdana 字体的样式 ZITIdeyangshi 123456789

字体大小为18px时：

Arial 字体的样式 ZITIdeyangshi 123456789
Tahoma 字体的样式 ZITIdeyangshi 123456789
Verdana 字体的样式 ZITIdeyangshi 123456789

通过以上对比，看出两个特点：

● Arial和Tahoma的大写i,Tahoma更容易识别
● Verdana的字间距比其他两个稍微大一些

3.关于字体的一些总结

①font-family默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体，
这个字体比较均衡，显示中英文混排很不错，是经久耐看的一款字体。

②Mac OS X系统有一款比Tahoma更典雅的系统默认字体：Helvetica，
非Mac系统的Helvetica字体都是Rip版。

③Arial是早期Windows英文系统的默认字体，XP和Vista上都是Tahoma。

④最后的sans-serif是针对强悍的Linux DIY族。Linux默认只有kernel，
字体完全由用户自定义，针对这部分用户，sans-serif可能能派上用场。

⑤最后，无论在XP还是Vista下，不指定网页的中文字体时，默认就是宋体。

注：css字体样式级别 > 浏览器字体样式级别

注:如果不设置默认中文字体，那么用户手动修改流量器的
默认字体设置时就会改变页面的字体样式，有利有弊，视具体情况自行选择。

文章名称：关于font-family的用法
网站链接：https://www.cdcxhl.com/news/173654.html

成都网站建设公司_创新互联，为您提供网站营销、ChatGPT、服务器托管、用户体验、微信小程序、外贸建站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容