css3字体的使用

font-family语法格式

在CSS中，通过 font-family属性来指定文本所使用的字体系列。语法格式为：

font-family: [<family-name> | <generic-family>] 

字体系列

其中，family-name为字体系列的名称；generic-family为通用字体系列的名称。也就是说，font-family属性的值既可以是具体的字体系列的名称，也可以是通用字体系列的名称。

CSS定义了 5 种通用字体系列，分别是serif、sans-serif、cursive、fantasy、monospace，font-family属性可用使用其中的任何一种。如果希望文档使用一种通用字体系列中的某个字体，但并不关心是哪一种具体的字体，使用通用字体系列就比较合适。如：

body {
font-family: sans-serif;
}

这样，浏览器就会从 sans-serif 字体系列中选择一种字体，并将它应用到 body 元素。由于 font-family属性具有继承性，这种字体将会应用到 body 元素中的所有元素，除非有一种更特殊的选择器将其覆盖。

选择字体时，要尽量选择能够引人注目（特别是标题），并且容易阅读的字体。当然，设计师也可以选择使用特定的字体。假如设计师希望所有 h1 标题都使用 Georgia 字体，可以使用以下声明：

h1 {
font-family: Georgia;
}

这会使浏览器对所有 h1 标题都使用 Georgia 字体。当然，这个规则是假设访问者的计算机上已经安装了该字体。并且，设计师总是希望使用任何想要的字体，遗憾的是，如果访问者的计算机上没有安装该字体，浏览器便会使用默认字体来显示 h1 标题。

不过，不必万念俱灰，通过结合特定字体和通用字体系列，可以创建与你预想相同的文档。可以使用以下规则，告诉浏览器使用 Georgia 字体（如果可用），如果 Georgia 字体不可用，就使用另外一种 serif 字体：

h1 {
font-family: Georgia, serif;
}

这时，如果访问者的计算机上没有安装Georgia字体，但安装了 Times 字体，浏览器就会使用 Times。尽管 Times 与 Georgia 并不完全匹配，但至少足够接近。

出于这个原因，强烈建议在所有 font-family 规则中，都提供一个通用字体系列。这样一来，就提供了一条后路。如果你对字体很熟悉，也可以在 font-family属性中指定想要的字体，并按优先顺序依次排列，中间用逗号分隔。如：

body {
font-family: Arial, SimSun, Helvetica, sans-serif;
}

浏览器会根据这个列表，按顺序查找这些字体，如果访问者的计算机上安装了第一种字体，就可以正确显示。如果没有安装第一种字体，就自动切换到第二种、第三种字体，以此类推。如果所有字体都没有找到，就会从 sans-serif 字体系列中选择一种可用的字体。

利用这个特性，还可以实现英文和中文使用不同字体的效果。通常的做法是，把英文字体写在前面，中文字体写在后面。如：

p {
font-family: Arial, 'Microsoft YaHei'; /* Arial，微软雅黑 */
}

这样，浏览器会优先使用 Arial 字体显示文本，由于中文字符不识别 Arial 字体，就会在后面的字体中继续查找，找到 Microsoft YaHei 字体后，便对中文应用该字体，这样，就达到了中文和英文使用不同字体的效果。

在指定字体时，如果字体名称中包含空格或中文或其他特殊字符，则要把整个字体名称用放在引号中，可以使用单引号，也可以使用双引号。并且，字体名称不区分大小写。

对于中文，有三种指定字体的方法：一种是直接使用中文字体名称，一种是使用英文字体名称，一种是使用字体的 unicode 码。 但是，在CSS文档中定义字体时，如果直接书写中文，经常会出现乱码，或者在某些浏览器下字体不生效。一个常用的解决办法，是把中文字体名称转换为对应的英文字体名称或unicode 码。如，宋体的英文字体名称为 SimSun、unicode 码为 5B8B4F53，则可以写成：

p {
font-family: SimSun;
}

也可以写成：

p {
font-family: "5B8B4F53";
}

上述两种写法是等价的，可以自行选择。为了方便查阅，几种常用字体的中文名称、英文名称、unicode码的对照关系见表

中文名称 英文名称 unicode
新细明体 PMingLiU 65B07EC6660E4F53
细明体 MingLiU 7EC6660E4F53
标楷体 DFKai-SB 6807 69774F53
黑体 SimHei 9ED14F53
宋体 SimSun 5B8B4F53
新宋体 NSimSun 65B05B8B4F53
仿宋 FangSong 4EFF5B8B
楷体 KaiTi 69774F53
仿宋_GB23122 FangSong_GB2312 4EFF5B8B_GB2312
楷体_GB2312 KaiTi_GB2312 69774F53_GB2312
微软正黑体 Microsoft JhengHei 5FAEx8F6F6B639ED14F53
微软雅黑 Microsoft YaHei 5FAE8F6F96C59ED1
华文细黑 STXihei 534E65877EC69ED1
华文黑体 STHeiti 534E65879ED14F53
华文楷体 STKaiti 534E658769774F53
华文宋体 STSong 534E65875B8B4F53
华文仿宋 STFangsong 534E65874EFF5B8B
丽黑 ProLiHei Pro Medium 4E3D9ED1 Pro
丽宋 ProLiSong Pro Light 4E3D5B8B Pro
标楷体 BiauKai 680769774F53
隶书 LiSu 96B64E66
幼圆 YouYuan 5E7C5706
华文细黑 STXihei 534E65877EC69ED1
华文楷体 STKaiti 534E658769774F53
华文宋体 STSong 534E65875B8B4F53
华文中宋 STZhongsong 534E65874E2D5B8B
华文仿宋 STFangsong 534E65874EFF 5B8B
方正舒体 FZShuTi 65B96B6382124F53
方正姚体 FZYaoti 65B9 6B6359DA4F53
华文彩云 STCaiyun 534E65875F694E91
华文琥珀 STHupo 534E6587742573C0
华文隶书 STLiti 534E658796B64E66
华文行楷 STXingkai 534E6587884C6977
华文新魏 STXinwei 534E658765B09B4F

虽然CSS提供了备选字体的机制，但是，在CSS3之前，所有的字体都只能是Web安全字体（即预先安装在主流个人计算机操作系统中的字体的子集）。直到CSS3中@font-face的出现，这个问题才彻底得到解决。

指定名为"myFirstFont"的字体，并指定在哪里可以找到它的URL：

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')   /* 注意路径*/
}

div
{
font-family: myFirstFont;
}

虽然 font-family属性具有继承性，但有几个元素不会继承父元素的字体设置，其中有表单的select、textarea 和input 元素。不过，可以强制它们继承父元素的字体设置。
代码如下：

input, select, textarea {
font-family: inherit;
}

原文：https://blog.csdn.net/ixygj197875/article/details/79312540

最后

以上就是高挑枫叶为你收集整理的css3字体的使用的全部内容，希望文章能够帮你解决css3字体的使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。