前端HTML字体和文本样式


文章目录

  • 前端HTML字体和文本样式
  • 1.字体样式
  • 1.1字体大小
  • 1.2 字体粗细
  • 1.3 字体样式（是否倾斜）
  • 1.4字体类型
  • 1.5 样式层叠问题
  • 1.6 字体复合属性
  • 2.文本样式
  • 2.1 文本缩进
  • 2.2 文本水平对齐方式
  • 2.3文本修饰
  • 3.行高


属性

表示

注意点

font-size

字号

我们通常用的单位是 px 像素，一定要跟上单位

font-family

字体

实际开发中按照约定来写字体

font-weight

字体粗细

j记住加粗是 700 或者 bold 不加粗是 normal 或者 400 记住数字不要跟单位

font-style

字体样式

记住倾斜是 italic , 不倾斜是 normal 工作中我们最常用 normal

font

字体连写

1.字体连写是由顺序的 不能随意换位置 2.期中字号和字体必须同时出现

1.字体样式

1.1字体大小

  • 属性名： font-size
  • 取值：数字+px
  • 谷歌默认浏览器的字体大小是16px 嵌入式引用：
<!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:30px 
        }
    </style>
</head>
<body>
    <p>段落文字</p>
</body>
</html>

1.2 字体粗细

  • 属性名：font-weight
  • 取值：关键字

关键字

正常

normal

加粗

bold

纯数字

100~900的整百分数

正常

400

加粗

700

  • 不是所有字体都提供九种粗细，因此部分取值页面中无变化
  • 实际开发中 正常 加粗两种取值使用最多
<!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>
        /* 400正常，700加粗 */
        div{
            font-weight: 700;
        }
    </style>
</head>
<body>
    <div>这是div</div>
</body>
</html>

1.3 字体样式（是否倾斜）

  • 属性名：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>
<body>
    <p>这是倾斜的文字</p>
</body>
</html>

1.4字体类型

  • 属性名：font-family
  • 字体有 “Microsoft YaHei"、微软雅黑，黑体…
<!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>
        div{
            /* sans-serif */
            /* 如果用户电脑没有安装微软雅黑，就按照黑体显示文字 */
            /* 如果用户电脑没有安装黑体，就按任一一种非衬线字体系列显示 */
            font-family: YaHei,黑体,sans-serif;
        }
    </style>
</head>
<body>
    <div>我想变字体</div>
</body>
</html>

1.5 样式层叠问题

Q: 如果给同一个标签设置了相同的样式，浏览器会如何渲染呢？
A: 如果给同一个标签设置了相同的样式，此时样式会叠层覆盖，写在最下面的会生效。
Tips： 1.CSS叠层样式表
2.所谓的叠层叠加的意思，表示样式可以一层一层发叠层覆盖

下面代码字体颜色发生叠层，巧克力色最后覆盖前面的蓝色，在浏览器中渲染出来

<!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{
            color: blue;
            color: chocolate;
        }
    </style>
</head>
<body>
    <p>层叠</p>
</body>
</html>

1.6 字体复合属性

  • 属性名：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:style weight size 字体; */
            font: italic 700 30px 宋体;
        }
    </style>
</head>
<body>
    <p>这是好的好的吧</p>
</body>
</html>

html5 使用字体图标 html5字体类型_前端

2.文本样式

文本缩进

text-indent

文本水平对齐方式

text-align

文本修饰

text-decoration

2.1 文本缩进

  • 属性名：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>
    <style>
        p{
            /* 浏览器默认字号：16px */
            /* 首行缩进2个字体   32px */
            text-indent: 32px;
        }
    </style>
</head>
<body>
    <p>hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必</p>
</body>
</html>

html5 使用字体图标 html5字体类型_css_02

2.2 文本水平对齐方式

  • 属性名：text-align
  • 取值:

属性值

效果

left

左对齐

center

居中对齐

right

右对齐

注意点：如果需要文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

<!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>
        h1{
            /* text-align: left; */
            /* text-align: right; */
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>新闻标题</h1>
</body>
</html>

text-align:center 可以让 文本、图片，span标签，a标签，input标签，img标签等居中。

图片居中，图在哪个标签里面就给哪个标签添加center属性。

html5 使用字体图标 html5字体类型_前端_03

2.3文本修饰

  • 属性名：text-decoration
  • 取值：

属性名

效果

underline

下划线（常用

line-throgh

删除线（不常用

overline

上划线

none

无装饰线

注意：开发中会使用text-decoration :none 清除a标签默认的下划线

下面是针对不同标签分别采用上面四个属性值的效果。

html5 使用字体图标 html5字体类型_visual studio_04

<!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>
        div{
            text-decoration: underline;
        }
        p{
            text-decoration: line-through;
        }
        h2{
            text-decoration: overline;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>pppp</p>
    <h2>h2</h2>
    <a href="#">我是一个超链接</a>
</body>
</html>

3.行高

html5 使用字体图标 html5字体类型_visual studio_05


html5 使用字体图标 html5字体类型_visual studio_06

<style>
        p{
            /* font-size: 40px; */
            /* line-height: 60px; */

            line-height: 1.5;
        }
    </style>