中文网站如何选择 HTML 字体?


字体在网站的整体视觉吸引力中起着重要作用,精心挑选的字体将有助于传达正确的信息并建立品牌一致性。有很多的网络字体可以选择并应用到HTML中,但因中文汉字的特殊性,并不适合像英文一样引入WEB字体。本文将全面分析中文网站如何选择 HTML 字体。

汉字字体的特殊性

据统计中文约有10万个汉字,日常生活中常用的汉字也有2500个。

而英文只有26个字母,算上标点符号和一些常用的半角符号一般也不超过100个。

所以中文的汉字字体文件一般会比较大,普遍超过10M甚至超过100M,而英文字体则可以用KB为单位。如果在HTML中直接引入字体文件的话会使得网页加载速度很慢。

这也是为什么绝大部分的网页仅采用系统默认字体。

网页如何选择系统默认字体

HTML网页是跨平台的,也就是说不论用户是使用桌面的Windows系统、Linux系统或是移动设备的Android或IOS等系统,网页都是可浏览的,但这些系统中预装的中文字体是不同的。

假设网页中使用”微软雅黑“字体,在所有的微软中文系统中都是默认支持的,但Android或IOS就不一定支持了,会被默认改成系统默认字体。

一般中文网站会指定几个字体,按照先后顺序,如果客户端系统支持则采用最先指定的字体,如果不支持则往后匹配,一直匹配到支持的字体(如果全部都不支持,那么将改用系统字体system-ui)。

中文网页字体设置常用示例

通用网页:

font-family:'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;

稍个性化类:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',sans-serif;

技术开发类:

font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;

除非注明,否则均为本站原创文章,禁止任何形式转载。

精品WordPress资源下载