CSS中文字体如宋体/微软雅黑的英文名称写法

我们在制作网页前端的时候,最常会遇到的两种中文字体是“宋体/微软雅黑”,你可以在css里面定义写成中文,但是这样的坏处是在英文的系统里面支持会不太好,为求保险,微软雅黑字体的css可以这样定义:

font-family:'Microsoft YaHei','微软雅黑';

下面给出一些常见字体的英文:

Windows的一些:

新细明体:PMingLiU
细明体:MingLiU
标楷体:DFKai-SB
黑体:SimHei
宋体:SimSun
新宋体:NSimSun
仿宋:FangSong
楷体:KaiTi
仿宋_GB2312:FangSong_GB2312
楷体_GB2312:KaiTi_GB2312
微软正黑体:Microsoft JhengHei
微软雅黑体:Microsoft YaHei

装Office会生出来的一些:

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

Mac OS的一些:

华文细黑:STHeiti Light [STXihei]
华文黑体:STHeiti
华文楷体:STKaiti
华文宋体:STSong
华文仿宋:STFangsong
俪黑 Pro:LiHei Pro Medium
俪宋 Pro:LiSong Pro Light
标楷体:BiauKai
苹果俪中黑:Apple LiGothic Medium
苹果俪细宋:Apple LiSung Light
### HTML 中文字体设置方法 在HTML中,通过CSS的`font-family`属性可以定义页面中的字体样式。为了确保浏览器能够正确显示中文字体,通常需要提供多个备选字体以提高兼容性。 #### 基本语法 以下是设置中文字体的基本语法: ```css body { font-family: "字体名称1", "字体名称2", fallback-font; } ``` 其中,“字体名称1”为主字体,如果用户的设备未安装该字体,则会依次尝试后续字体。“fallback-font”通常是通用字体族(如`sans-serif`),用于最终兜底[^5]。 --- #### 推荐的中文字体及其写法 以下是一些常见的中文字体以及其对应的书写方式: 1. **黑体 (SimHei)** 黑体是一种无衬线字体,广泛应用于标题和正文。可以通过以下代码实现: ```css body { font-family: "STHeiti", SimHei, "Microsoft Yahei", sans-serif; } ``` 2. **宋体 (SimSun)** 宋体具有传统的印刷风格,适合正式文档或书籍排版。 ```css body { font-family: "\5B8B\4F53", SimSun, serif; } ``` 3. **楷体 (KaiTi)** 楷体模仿手写字迹,常用于艺术化展示。 ```css body { font-family: KaiTi, STKaiti, serif; } ``` 4. **幼圆 (YouYuan)** 幼圆笔画浑圆饱满,适用于儿童读物或其他轻松场景。 ```css body { font-family: YouYuan, STXihei, sans-serif; } ``` 5. **微软雅黑 (Microsoft Yahei)** 微软雅黑是一款现代感强的字体,默认被许多Windows系统采用。 ```css body { font-family: "Microsoft Yahei", "Hiragino Sans GB", sans-serif; } ``` 6. **文泉驿微米黑 (WenQuanYi Micro Hei)** 这是一个开源字体,在Linux环境下表现良好。 ```css body { font-family: "WenQuanYi Micro Hei", sans-serif; } ``` 上述字体均需考虑跨平台支持情况,因此建议按照优先级顺序排列多种字体选项。 --- #### 结合英文字体的综合方案 当同时涉及中文与英文时,可分别指定不同的字体家族来优化视觉效果。例如: ```css body { font-family: "Microsoft Yahei", "Hiragino Sans GB", Arial, Helvetica, sans-serif; } h1 { font-family: "STHeiti", Arial, sans-serif; } ``` 这里为中文选择了“微软雅黑”,而英文则默认回退到Arial系列[^3]。 --- #### VS Code 编辑器内的字体调整技巧 对于前端开发者而言,在编写HTML/CSS文件前也可以先配置开发环境下的字体以便更直观预览效果。比如Visual Studio Code可通过修改settings.json完成个性化定制[^4]: ```json { "editor.fontFamily": "'Fira Code', 'Courier New', monospace", "editor.fontSize": 16, "workbench.colorCustomizations": { "editorLineHighlightBackground": "#f0f0f0" }, "editor.fontLigatures": true } ``` 注意这里的编辑器字体并不影响实际项目运行后的外观呈现。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值