搜 索

3. font属性

  • 505阅读
  • 2020年10月21日
  • 0评论
首页 / CSS / 正文

字体属性设置:英文字体在前,中文字体在后。如果中文字体在前则英文字体就会失效,因为中文字体也包含英文,而英文字体不包含中文字体。

注意

  • 字体如果是中文,用引号包裹起来;
  • 多个字体设置,字体与字体之间用英文逗号隔开;
  • 引号嵌套,外面使用双引号,里面使用单引号。外双内单,内单外双
font-family: sans-serif, '宋体';

font参数

font-size字体大小

font-weight字体加粗

font-style字体样式

font-family字体名字

font-variant字体英文转换

font-variant 可以把小写英文转换为大写,不过转换后变成大写会变细一些,举个栗子:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p {
        font-variant: small-caps;
    }
</style>

<body>
    <p>mxjyy</p>
</body>

</html>

font组合写法

顺序:

样式>转换>粗细>大小>字体

font-style font-variant  font-weight  font-size  font-family

示例

原写法:

p {
        /* 倾斜 */
        font-style: italic;
        /* 转换 */
        font-variant: small-caps;
        /* 加粗 */
        font-weight: bold;
        /* 大小 */
        font-size: 20px;
        /* 行高 */
        line-height: 1.5;
        /* 字体 */
        font-family: sans-serif, "微软雅黑";
}

组合写法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p {
        font: italic small-caps bold 20px/1.5 sans-serif, "微软雅黑";
    }
</style>

<body>
    <p>mxjyy</p>
</body>

</html>

可见组合写法有多么方便,原几行代码,用组合写法一行搞定。

注意

  • 组合写法不需要的样式属性可以省略,直接写下一个样式属性,必须按照顺序写
  • 组合写法必须保留字体大小跟字体名称,否则不会有效果
无标签
评论区
暂无评论
avatar