匠人学院 JR Academy学AI来匠人
匠人学院 JR Academy学AI来匠人

Follow Us

linkedinfacebooktwitterinstagramweiboyoutubebilibilitiktokxigua

We Accept

/image/layout/pay-paypal.png/image/layout/pay-visa.png/image/layout/pay-master-card.png/image/layout/pay-airwallex.png/image/layout/pay-alipay.png
EN

关于公司

关于我们元宇宙课堂新闻资讯匠人工作成为导师匠人导师联系我们匠人商店J3.Club

匠人资源

工作内推匠人活动1对1私教行业白皮书线上学习平台面试中心分享面试经验Internship会员中心

AI 工具

AI 工具箱考证匠 Cert Master求职匠 Job Hunter牛小匠 UniMate AI

AI 学习方向

全部学习方向AI EngineerContext EngineeringVibe CodingPrompt MasterAI BuilderAI 产品经理Python 入门

AI 应用提效

AI 办公提效AI 数据分析AI 财务AI 内容创作AI 视觉创作前端开发Hermes AgentOpenClaw 本地智能体

大学资源

墨尔本大学昆士兰大学新南威尔士大学悉尼大学莫那什大学阿德莱德大学RMITQUTUTS

少儿 AI 教育

Airbotix 少儿 AI 编程澳洲家长实用资料库NAPLAN 成绩单怎么看My School 学校数据指南悉尼私校学费 2026少儿编程课程与训练营

移民服务

澳洲移民技术移民189/190/491雇主担保482/186/494投资移民188/888英国移民美国移民加拿大移民

企业合作

P3职业孵化器Enterprise (EN)企业培训实习合作招聘合作申请合作

求职代理

岗位代投职位监控LinkedIn代运营LinkedIn人脉代加了解P3项目

匠人支持

FAQsTerms & ConditionsPrivacy PolicyCancellation & Refund PolicySite map

Top Categories

Web全栈班DevOps项目班数据工程全栈班数据分析项目班编程入门班Business Analyst实习算法集训营

求职就业

BA和产品经理实习数据科学实习数据分析实习Marketing实习简历修改面试指导导师指导VIP

地址

Level 10b, 144 Edward Street, Brisbane CBD(Headquarter)
Level 2, 171 La Trobe St, Melbourne VIC 3000
四川省成都市武侯区桂溪街道天府大道中段500号D5东方希望天祥广场B座45A13号
Business Hub, 155 Waymouth St, Adelaide SA 5000

联系方式

hello@jiangren.com.au0421-672-555

Disclaimer

footer-disclaimerfooter-disclaimer

JR Academy acknowledges Traditional Owners of Country throughout Australia and recognises the continuing connection to lands, waters and communities. We pay our respect to Aboriginal and Torres Strait Islander cultures; and to Elders past and present. Aboriginal and Torres Strait Islander peoples should be aware that this website may contain images or names of people who have since passed away.

匠人学院网站上的所有内容,包括课程材料、徽标和匠人学院网站上提供的信息,均受澳大利亚政府知识产权法的保护。严禁未经授权使用、销售、分发、复制或修改。违规行为可能会导致法律诉讼。通过访问我们的网站,您同意尊重我们的知识产权。JR Academy Pty Ltd 保留所有权利,包括专利、商标和版权。任何侵权行为都将受到法律追究。查看用户协议

© 2017-2026 JR Academy Pty Ltd. All rights reserved.

ABN 26621887572

首页/资源中心/文章详情
JR Academy · Blog职业洞察

中文字体网页开发指南

字体的选择,是网页开发的关键因素之一。 合适的字体,对网页的美观度(或可读性)有着举足轻重的影响。

发布日期2020-06-22
阅读时长1 分钟
作者Ann Ann

快速导航

  • 一、操作系统的预装字体
  • 二、font-family命令
  • 三、 Windows平台和Mac平台
  • 四、衬线体和无衬线体
  • 五、几种常见中文字体

字体的选择,是网页开发的关键因素之一。

合适的字体,对网页的美观度(或可读性)有着举足轻重的影响。

但是,相比英文字体,中文字体的网页开发有着极大的局限性。因为,一套中文字体最少也要有几千个字符,体积为几个MB;单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体。(*注:确实有网站提供中文字体的web服务,从技术角度,我认为这样做不可取。)

不同的操作系统、不同的版本预装不同的字体(因为版权),几乎没有交集。因此,大多数开发者索性忽略中文字体,让操作系统自行渲染,或者用图片呈现字体效果。

下面是目前中文字体的最佳实践,主要参考了Kendra Schaefer的文章。

一、操作系统的预装字体

操作系统决定了开发者可以使用的字体。所以,第一步,我们必须了解操作系统到底提供哪些字体。

Windows操作系统:

  • 黑体:SimHei
  • 宋体:SimSun
  • 新宋体:NSimSun
  • 仿宋:FangSong
  • 楷体:KaiTi
  • 仿宋_GB2312:FangSong_GB2312
  • 楷体_GB2312:KaiTi_GB2312
  • 微软雅黑:Microsoft YaHei (Windows 7开始提供)

OS X操作系统:

  • 冬青黑体: Hiragino Sans GB (SNOW LEOPARD开始提供)
  • 华文细黑:STHeiti Light (又名STXihei)
  • 华文黑体:STHeiti
  • 华文楷体:STKaiti
  • 华文宋体:STSong
  • 华文仿宋:STFangsong

如果用户装了MicroSoft Office,还会多出一些字体。

  • 隶书:LiSu
  • 幼圆:YouYuan
  • 华文细黑:STXihei
  • 华文楷体:STKaiti
  • 华文宋体:STSong
  • 华文中宋:STZhongsong
  • 华文仿宋:STFangsong
  • 方正舒体:FZShuTi
  • 方正姚体:FZYaoti
  • 华文彩云:STCaiyun
  • 华文琥珀:STHupo
  • 华文隶书:STLiti
  • 华文行楷:STXingkai
  • 华文新魏:STXinwei

二、font-family命令

CSS的font-family命令,指定了网页元素所使用的字体。下面是一个例子。

font-family: Georgia, "Times New Roman", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;

它的规则有三条。

(1)优先使用排在前面的字体。

(2)如果找不到该种字体,或者该种字体不包括所要渲染的文字,则使用下一种字体。

(3)如果所列出的字体,都无法满足需要,则让操作系统自行决定使用哪种字体。

**根据这些规则,font-family应该优先指定英文字体,然后再指定中文字体。**否则,中文字体所包含的英文字母,会取代英文字体,这往往很丑陋。

上面图片中,红框内的英文字母,左边采用英文字体渲染,右边采用中文字体渲染,哪一种效果比较好,一目了然。

**为了保证兼容性,中文字体的中文名称和英文名称,应该都写入font-family。**比如,“微软雅虎”的英文名称是Microsoft YaHei。

此外,中文字体的中文名称,以及由多个单词组成的英文名称,应该放在双引号内。

三、 Windows平台和Mac平台

由于Windows和Mac的中文字体没有交叉,所以应该同时为两个平台指定字体。

常见的做法是,Windows平台指定“微软雅黑”(Microsoft YaHei),Mac平台指定“华文细黑”(STXihei)。

四、衬线体和无衬线体

所谓“衬线体”(Serif),指的是笔画的末端带有衬线的字体。

就像英文字体一样,中文字体也可以分成“衬线体”和“无衬线体”(San-serif)。比如,对于繁体字来说,微软正黑(Microsoft JhengHei)是无衬线体,新细名体(PMingLiU)是衬线体。

对于简体字来说,微软雅黑(Microsoft yahei)是无衬线体,宋体(SimSun)是衬线体。

一般来说,衬线体装饰性强,往往用于标题;无衬线体清晰度好,往往用于正文。

五、几种常见中文字体

(1)宋体(SimSun)

最常见的中文字体,如果没有指定字体,操作系统往往选择它来渲染。很多人认为,这种字体并不美观。

(2)微软雅黑(Microsoft YaHei)

微软雅黑的美观度和清晰度都较好,可以作为网页的首选字体。它在Mac平台的对应字体是华文细黑(STXihei)。

但是,Windows XP没有预装这种字体,这时操作系统往往会选择黑体(Simhei)取代。

(3)仿宋(FangSong)

这种字体是衬线体,比宋体的装饰性更强。如果字号太小,会影响清晰度,所以只有在字号大于14px的情况下,才可以考虑这种字体。

它在Mac平台的对应字体是“华文仿宋”(STFangsong)。

(4)楷体(KaiTi)

楷体也是衬线体,装饰性与仿宋体接近,但是宽度更大,笔画更清楚一些。这种字体也不应该在小于14px的情况下使用。

它在Mac平台的对应字体是“华文楷体”(STKaiti)。

News
作者Ann Ann
一键分享或复制链接
Ann Ann
Reviewer: Ann Ann

Founder of JR Academy

查看该作者的更多文章 →
← 上一篇理解OAuth 2.0下一篇 →Commit message 和 Change log 编写指南

相关文章推荐

什么!一站式BusinessAnalyst训练营+实习又来了?快来抢占职场先机!

2024-08-30

精彩回顾|AI与创新激情碰撞!悉尼JR&AtlassianAI主题活动完美收官!

2024-08-26

官宣!澳洲政府颁布新规!留学生或将被限制入境,485确定免费延长2年!

2024-08-21

平心而论,我在澳洲没见过这么好的数据分析班!

2024-08-20

澳洲数据分析+任何专业=王炸!

2024-08-20

年薪可达10万澳币?这“十大”工作成为华人梦中情职!就业季来袭,墨尔本职业博览会强势开启,500+岗位为你职业生涯保驾护航!

2024-08-14
查看全部文章 →
JR Academy
全球华人学习 AI 第一站
✓15000+ 学员
✓50+ 课程
✓AI 驱动学习平台
训练营免费资源AI学习职业辅导
精选推荐
AI 职业影响地图
测测你的职业风险等级,查看转型路径与学习方向
热门工具
AI & 数据训练营
系统化课程 + 真实项目实战,快速提升竞争力
热门课程
1v1 就业辅导
资深导师一对一指导,简历优化 + 面试准备
就业保障
企业内训定制
AI 技能培训方案,助力团队升级
企业服务
热门标签
Vibe CodingAI 编程CursorClaude求职攻略Prompt前端开发后端开发
订阅更新

获取最新 AI 学习资源、技术教程和求职攻略,直接送达邮箱。

我们尊重您的隐私,不会发送垃圾邮件