字体和文本样式

字体大小

  • 属性名

font-size

  • 取值

数字+px

  • 注意

谷歌浏览器默认文字大小是16px
单位需要设置,否则无效

字体粗细

  • 属性名

font-weight

  • 取值
正常normal
加粗bold
正常400
加粗700

纯数字:100~900的整百数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            font-size: 100px;
            font-weight: 800;
        }
    </style>
</head>
<body>
<div></div>
<p>你好</p>
</body>
</html>
字体和文本样式插图

字体样式(是否倾斜)

  • 属性名

font-style

  • 取值

正常(默认值):normal
倾斜:italic

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            font-style: italic;
        }
    </style>
</head>
<body>
<div></div>
<p>你好</p>
</body>
</html>
字体和文本样式插图1

字体系列

  • 属性名

font-family

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            font-family: 宋体;
        }
    </style>
</head>
<body>
<div></div>
<p>你好</p>
</body>
</html>
字体和文本样式插图2

样式层叠问题

如果样式重叠的话将会使用第二个样式第一个样式将会被覆盖

字体font属性的连写

  • 属性名

font

  • 取值

font : style weight size family;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            font:italic bold 50px 宋体 ;
        }
    </style>
</head>
<body>
<div></div>
<p>你好</p>
</body>
</html>
字体和文本样式插图3

文本缩进

  • 属性名

text-indent

  • 取值

数字+px
数字+em(推荐:1em = 当前标签的font-size的大小)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<p style="text-indent: 40px;">这个简写属性用于一次设置元素字体的两个或更多方面。使用 icon 等关键字可以适当地设置元素的字体,使之与用户计算机环境中的某个方面一致。注意,如果没有使用这些关键词,至少要指定字体大小和字体系列。 </p>
</body>
</html>
字体和文本样式插图4

文本水平对齐方式

  • 属性名

text-align

  • 取值
属性值效果
left左对齐
center居中对齐
right右对齐
  • 属性名

text-decoration

属性值效果
underline下划线(常用)
line-through删除线(不常用)
overline上划线(几乎不用)
none无装饰线(常用)

使用text-decoration:none;清除a标签默认的下划线

line-height行高

  • 作用

控制一行的上下行间距

  • 取值

数字+px
倍数(当前标签font-size的倍数

  • 应用

让单行文本垂直居中可以设置 line-height : 文字父元素高度
网页精准布局时,会设置 line-height : 1 可以取消上下间距

  • 行高与font连写的注意点

如果同时设置了行高和font连写,注意覆盖问题
font : style weight size/line-height family ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="line-height: 50px;"> 这个人</p>
</body>
</html>
字体和文本样式插图5

Chrome调试工具操作

d9f53962d9186bcd9cb951e970475be7.png
© 版权声明
THE END
喜欢就支持一下吧
点赞9赞赏 分享
评论 抢沙发

请登录后发表评论