CSS 字体和文本样式

Posted 2022-07-02 lyw-hunnu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 字体和文本样式相关的知识，希望对你有一定的参考价值。

一、字体 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>

　　效果为：

技术图片

以上是关于CSS 字体和文本样式的主要内容，如果未能解决你的问题，请参考以下文章