CSS字体、文本属性

原创已于 2023-02-28 17:05:47 修改 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

于 2023-02-27 14:06:01 首次发布

本文介绍了CSS中设置字体系列的`font-family`属性，强调了使用系统默认字体的重要性。此外，讲解了`font-size`用于设定字体大小，推荐使用明确的像素值。`font-weight`控制字体粗细，400代表正常，700代表加粗。`font-style`用于设置斜体。复合属性`font`简化了多个字体属性的设置。同时，文章还涵盖了文本颜色、对齐方式（`text-align`）、文本装饰（`text-decoration`）、文本缩进（`text-indent`）和行间距（`line-height`）的使用方法。

字体系列

font-family设置字体

cs使用font-family属性定义文本的字体系列。

<style>
    h2 {
        font-family: "Microsoft YaHei";
    }
    p {
        font-family: 'Times New Roman', Times, serif;
    }
</style>

注意点：
（1）各种字体之间需使用逗号隔开（英文状态下）
（2）一般情况下，如果有空格隔开的多个单词组成的字体，需要加引号
（3）尽量使用系统默认的自带字体，保证在任何用户的浏览器中都能正确显示
（4）当有多个字体时，系统会从第一个字体开始执行，如果第一个字体没有就使用第二个，第二个也没有就使用第三个，如果都没有就会使用系统默认的字体
（5）通常，直接给<body>设置字体

注意：
（1）px（像素）大小是网页常用的单位
（2）谷歌浏览器默认的文字大小是16px
（3）不同浏览器可能默认显示的字号大小不一致，我们应尽量给一个明确值大小，不要默认值
（4）可以给body指定整个页面文字的大小
（5）标题标签比较特殊，需要单独指定文字大小

字体粗细

css使用font-weight属性设置字体大小。
语法：

  .bold {
            font-weight:700;  此处使用的是类选择器
        }
     h2 {
            font-weight: 400;   此处是标签选择器
        }

注意：数字=400时等同于normal，即不加粗的；数字=700时等同于bold，即加粗。

文字样式

css使用font-style属性设置文本的风格。
语法：

p {
            font-style:italic;    
            /*字体倾斜 */
        }
        em {
            font-style:normal;
            /* 让字体不倾斜 */     最常用的是让倾斜的文字变得不倾斜
        }

字体复合属性

如果为一个标签要添加所有的字体属性，需要一行一行的写出来，如：

div {
            
            font-style:italic;
            font-size:16px;
            font-weight: 400;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }

每次都要写一行，为了简化代码，可以采用复合写法。语法：
font: font-style font-weighe font-size/line-height font-family;
eg:
font:italic 700 16px ‘Microsoft yahei’
注意：
（1）不能更换顺序（swsf稍微舒服），各个属性之间要用空格隔开
（2）不需要设置的属性可以省略（取默认值），但是必须保留font-size和font-family属性，否则font属性将不起作用

字体属性总结

属性	表示	注意点
font-size	字号	注意写单位：px
font-family	字体	按照团队约定写字体
font-weight	字体粗细	加粗：bold或是700；不加粗：normal或是400，不要加单位
font-style	字体样式	倾斜：italic 不倾斜：normal
font	字体连写	有顺序，字号和字体必须同时出现

文本系列

文本属性

CSS-text属性可以定义文本的外观，必须文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

文本颜色

color属性用于定义文本的颜色。
颜色的表示：
（1）预定义的颜色值red，blue等英文单词
（2）十六进制表示，如：#ff0000（6位） 用的最多
（3）使用RGB代码格式：如：rgb（2555,0,0）

对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式。

div {
   text-align：center;   left左对齐（默认值） right右对齐 center居中对齐
}

装饰文本

text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等。
语法：

div {
    text-decoration: underline;
}
 a {
      text-decoration: none;        取消链接的下划线！
    }

装饰文本

文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落进行首行缩进。
语法：

p {
    text-indent: 20px;
}

p {
    text-indent: 2em;        缩进了2个文字的大小
}

em是一个相对单位，就是当前元素（font-size）1个文字的大小。如果当前元素没有设置文字大小，会按照父元素的一个文字的大小。

行间距

line-height属性用于设置行间距，控制文字行与行之间的距离。

若设置行间距为26px，文本高度默认16px，则上下间距各为5px。
当line-height和盒子的高度相同时，可以实现文字的垂直居中