浏览器支持什么字体取决于用户系统里安装了什么字体。
如CSS中这么写:font-family:"微软雅黑","黑体","宋体";浏览器会按照从左到右的顺序依次应用,假设用户电脑上没有安装'微软雅黑',那么就用'黑体'。
怎么保证用户电脑的系统里有开发人员希望的字体?
css规定了五种通用字体:"serif"、"sansserif"、"cursive"、"fantasy"、"monospace",请注意,这5个不是5个字体,表示5类字体。
比如说serif表示那种字体成比例,且上下有小横线的(参考time new roman),那么只要符合这个特征的字体都可以算成是serif, 具体采用哪个字体,由浏览器自己根据用户电脑上安装了哪种字体采用一个默认的,各浏览器可能有所不同。几乎所有你知道的普通字体都落入这5种字体类中,这样CSS可以基本上保证一个网页呈现在不同用户的电脑上的用户体验是差不多的。
五种通用字体族介绍
衬线字体(Serif)- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
无衬线字体(Sans-serif)- 字体线条简洁(没有小笔画)。它们营造出现代而简约的外观。
等宽字体(Monospace)- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
草书字体(Cursive)- 模仿了人类的笔迹。
幻想字体(Fantasy)- 是装饰性/俏皮的字体。
五种通用字体族例子
CSS font-family 属性
在 CSS 中,我们使用 font-family 属性规定文本的字体。
font-family 属性应包含多个字体名称作为“后备”系统,以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始,并以通用系列结束(如果没有其他可用字体,则让浏览器选择通用系列中的相似字体)。字体名称应以逗号分隔。
注释:如果字体名称不止一个单词,则必须用引号引起来,例如:"Times New Roman"。
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
美工设计了高大上的字体,一般用户电脑上没有的怎么办?
我们可以用font-face让用户的浏览器从服务器上下载字体
@font-face {
font-family: OPPOSans-bold;
src: url('../fonts/OPPOSans-Bold.ttf');
}
@font-face {
font-family: SourceHanSansSC-light;
src: url('../fonts/SourceHanSansCN-light.otf');
}
总结:浏览器支持任何你想支持的字体