css中font-family的中文字体

CSS中文字体设置技巧
本文探讨了CSS中font-family属性对于中文字体的应用方法,包括直接使用中文名称、英文名称及Unicode编码三种方式,并分析了各自的优缺点。文中还列举了一些常用的中文字体及其不同形式的表示方法。

说到css中的font-family,相信很多朋友经常用,但不知道当你遇到引用中文字体的时候你会怎么写?
最近特别关注了下,发现最常用的基本有三种类型:

  1. 1、直接中文;
  2. 2、英文形式;
  3. 3、unicode码;

前面两种形式很好理解,unicode码是什么意思呢?下面看基本定义:

Unicode(统一码、万国码、单一码)是一种在计算机上使用的字符编码。它为每种语言中的每个字符设定了统一并且唯一的二进制编码,以满足跨语言、跨平台进行文本转换、处理的要求。

更多内容请查看百度百科对Unicode的介绍。
介绍完方案,再谈下使用。之前在看玉伯写的一篇文章《中文字体在 CSS 中的写法》 中提到:font-family中用到的宋体,“用 unicode 表示,不用 SimSun, 是因为 Firefox 的某些版本和 Opera 不支持 SimSun 的写法”。我在网上搜索了下相关内容,大多都是摘抄这篇文章,并没有提到具体哪个版本的Firefox和Opera会不支持英文的写法。

对比下,三种方法各有优缺点:中文形式的方便记忆,但在不支持中文的系统或者编码的页面则无法正常显示;英文形式的兼容了系统和编码的问题,但不方便记忆,又可能有潜在的风险;unicode码兼容行最好,但也存在记忆难的问题。

综合权衡下,在性能和安全第一的条件下,还是推荐使用unicode码。如果不是太严格的情况下,可以选择其他两种。

下面整理下常用的各种字体的不同显示形式,方便使用的时候查找:

中文名英文名Unicode
Windows
* 宋体SimSun\5B8B\4F53
* 黑体SimHei\9ED1\4F53
* 微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1
微软正黑体Microsoft JhengHei\5FAE\x8F6F\6B63\9ED1\4F53
新宋体NSimSun\65B0\5B8B\4F53
新细明体PMingLiU\65B0\7EC6\660E\4F53
细明体MingLiU\7EC6\660E\4F53
标楷体DFKai-SB\6807\6977\4F53
仿宋FangSong\4EFF\5B8B
楷体KaiTi\6977\4F53
仿宋_GB2312FangSong_GB2312\4EFF\5B8B_GB2312
楷体_GB2312KaiTi_GB2312\6977\4F53_GB2312
Mac OS
* 华文细黑STHeiti Light [STXihei]\534E\6587\7EC6\9ED1
* 华文黑体STHeiti\534E\6587\9ED1\4F53
华文楷体STKaiti\534E\6587\6977\4F53
华文宋体STSong\534E\6587\5B8B\4F53
华文仿宋STFangsong\534E\6587\4EFF\5B8B
丽黑 ProLiHei Pro Medium\4E3D\9ED1 Pro
丽宋 ProLiSong Pro Light\4E3D\5B8B Pro
标楷体BiauKai\6807\6977\4F53
苹果丽中黑Apple LiGothic Medium\82F9\679C\4E3D\4E2D\9ED1
苹果丽细宋Apple LiSung Light\82F9\679C\4E3D\7EC6\5B8B

上表中标*为常用字体

转载自:http://www.cnblogs.com/jiji262/archive/2012/02/13/2349851.html

转载于:https://www.cnblogs.com/linsanshu/p/5743996.html

CSS中,`font-family` 属性用于定义网页中文本的字体样式。由于不同用户的设备可能安装了不同的字体,因此为了确保文本在各种环境下都能以最佳方式呈现,通常会指定一个字体系列(font family),其中包含多个备选字体。 以下是一些常用的 `font-family` 字体组合推荐: ### 通用字体组合 1. **无衬线字体(Sans-serif)** ```css font-family: Arial, Helvetica, sans-serif; ``` 2. **衬线字体(Serif)** ```css font-family: "Times New Roman", Times, serif; ``` 3. **等宽字体(Monospace)** ```css font-family: "Courier New", Courier, monospace; ``` 4. **现代简洁风格** ```css font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; ``` ### 中文常用字体组合 对于中文网站,考虑到用户设备上常见的中文字体,可以使用如下组合: 1. **微软雅黑风格(Windows系统常见)** ```css font-family: "Microsoft YaHei", "微软雅黑", sans-serif; ``` 2. **苹方风格(Mac和iOS系统常见)** ```css font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; ``` 3. **综合中文字体(兼顾多平台)** ```css font-family: "PingFang SC", "Microsoft YaHei", "SimSun", sans-serif; ``` ### 网站设计中的字体选择建议 - **优先考虑跨平台兼容性**:尽量选择在不同操作系统和浏览器中都广泛支持的字体。 - **使用Web安全字体**:如Arial、Helvetica、Times New Roman等,这些字体几乎在所有设备上都有安装。 - **利用Google Fonts等外部字体库**:如果希望使用更独特的字体,可以通过引入在线字体服务来扩展字体选择范围[^1]。 ### 示例代码 ```html <p style="font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;"> 这是一段使用推荐中文字体组合的文本。 </p> ``` 以上字体组合能够满足大多数网页设计需求,并确保在不同设备和浏览器中保持良好的可读性和一致性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值