一、字体 font-family
font-family:[字体1] [,字体2] [,...]例如： font-family:"宋体";
1. 含空格字体名和中文，用英文引号( " ) 括起
font-family:"微软雅黑"; font-family:"Calibri Light";
2. 多个字体，用英文逗号 “,” 隔开
设置多个字体，浏览器依次查找，如果都没有，使用浏览器默认样式。
由于每个人安装的操作系统不一样，每个操作系统自带的字体是不一样的，所以不要设置单独安装的字体。否则，设置的样式可以在自己的电脑正常显示却没办法在用户的电脑显示。
font-family:"宋体","微软雅黑","Consolas";
3. 引号嵌套，外使用双引号，内使用单引号
<p style="font-family:‘微软雅黑‘>CSS 字体样式</p>
4. font-family 属性值：具体字体名（像上面举例那样），字体集
字体集不是指单个字体，而是指一类字体。例如：
sans 字体集会在字体的尾部加上一些装饰线，而 snas serif 不会。这就是这两个字体集的区别。宋体就是 serif 字体集中的一员，而微软雅黑是 sans serif 中的一员。
宋体：
微软雅黑：
一般可以在样式后面加上字体集，例如：
font-family:"宋体","微软雅黑","Consolas",sans-serif;
二、字体大小 font-size
font-size 值是一个长度值，这个长度值可以分为绝对单位和相对单位。
1. 绝对单位
绝对单位在任何分辨率的显示下，显示出来的都是绝对的大小，不会发生改变。绝对单位有以下几个：
右边栏的绝对单位是按照缩放比例形成的，medium 是默浏览器器的字体大小（此处是 chrome 浏览器默认的字体大小）
例子如下：
<style type="text/css">
.in{ font-size: 0.5in;}
.cm{ font-size: 0.5cm; }
.xsmall{ font-size: x-small; }
.medium{ font-size: medium; }
.xxlarge{ font-size: xx-large; }
</style>
<body>
<p> 浏览器默认大小</p>
<p class="in">文字大小是 in</p>
<p class="cm">文字大小是 cm</p>
<p class="xsmall">文字大小是 xsmall</p>
<p class="medium">文字大小是 medium</p>
<p class="xxlarge">文字大小是 xxlarge</p>
</body>
同一个绝对单位在不同浏览器下可能会有不同的显示效果，所以一般不推荐使用绝对单位。
2. 相对单位
有 px 像素 、 em 和 %
<style type="text/css">
.testpx{ font-size: 20px; }
.testem{ font-size: 2em; }
.precent{ font-size: 120%; }
</style>
<body>
<p> 浏览器默认大小</p>
<p class="testpx">文字单位是 px</p>
<p class="testem">文字单位是 em</p>
<p class="precent">文字单位是 %</p>
</body>
其中 em 和 % 都是针对父元素的，例如
<p> 浏览器默认大小</p><p class="testem">em文字大小<span style="font-size: 2em;">父元素的2em</span></p> <p class="precent">%文字大小<span style="font-size: 70%;">父元素的2em</span></p>
效果为：
原文地址：https://www.cnblogs.com/lyw-hunnu/p/11253999.html
时间： 2024-08-10 07:24:35