字体和文本样式

最新推荐文章于 2023-09-05 17:11:07 发布

@彤管

最新推荐文章于 2023-09-05 17:11:07 发布

阅读量212

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/m0_58258716/article/details/131847124

版权

一、字体样式

1.1 字体大小

属性名：font-size

取值：数字+px

注意点：

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>字体样式</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 name="viewport" content="width=device-width, initial-scale=1.0">
     <title>字体粗细</title>
     <style>
         div{
             font-weight: normal;
         }
         h1{
             font-weight: 400;
         }
     </style>
 </head>
 <body>
     <div>这是一个div</div>
     <h1>一级标题</h1>
 </body>
 </html>

1.3 字体样式(是否倾斜)

属性名：font-style

取值：

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>字体样式(是否倾斜)</title>
     <style>
         p{
             font-style: italic;
         }
 
     </style>
 </head>
 <body>
     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi laboriosam nemo ab, ipsum ipsa ducimus sed odit, maiores numquam laudantium maxime, doloribus consequuntur veritatis enim neque perferendis fugit soluta! Fuga!</p>
 </body>
 </html>

1.4 常见字体系列(了解)

无衬线字体(sans-serif)

特点：文字笔画粗细均匀，并且首尾无装饰
场景：网页中大多采用无衬线字体
常见该系列字体：黑体、Arial

衬线字体(serif)

特点：文字笔画粗细不均，并且首尾有笔锋装饰
场景：报刊书籍中应用广泛
常见该系列字体：宋体、Times New Roman

等宽字体(monospace)

特点：每个字母或文字的宽度相等
场景：一般用于程序代码编写，有利于代码的阅读和编写
常见该系列字体：Consolas、fira code

1.5 字体系列

属性名：font-family

常见取值：具体字体1，具体字体2，具体字体3，具体字体4，……，字体系列

具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……
字体系列：snas-serif、serif、monospace等……

渲染规则：

从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

系统	默认字体
Windows	微软雅黑
macOS	苹方

注意点：

如果字体名称中存在多个单词，推荐使用引号包裹
最后一项字体系列不需要引号包裹
网页开发时，尽量使用系统常见自带字体，保证不同用户浏览器网页都可以正确显示

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>字体系列font-family</title>
     <style>
         div{
             /* font-family:宋体 ; */
             font-family: 微软雅黑,黑体,sans-serif;
         }
     </style>
 </head>
 <body>
     <div>这是一个div标签</div>
 </body>
 </html>

1.6 样式的层叠问题

给同一个标签设置了相同的样式，样式会层叠(覆盖)，写在下面的会生效

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>样式的层叠问题</title>
     <style>
         p{
             color:red;
             color:blue;
         }
     </style>
 </head>
 <body>
     <p>我是一个p标签</p>
 </body>
 </html>

1.7 字体font相关属性的连写

属性名：font(复合属性)

取值：

font: style weight size family

省略要求：

只能省略前两个，如果省略了相当于设置了默认值

注意点：如果需要同时设置单独和连写形式

要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>字体font相关属性的连写</title>
     <style>
         p{
             font:italic bold 30px 宋体;
         }
 
     </style>
 </head>
 <body>
     <p>这是一个p标签</p>
 </body>
 </html>

二、文本样式

2.1 文本缩进

属性名：text-indent

取值：

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>文本缩进</title>
     <style>
         p{
             text-indent:2em;
         }
     </style>
 </head>
 <body>
     <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque nisi iusto deserunt reprehenderit, provident, veritatis voluptates consectetur laudantium obcaecati quis ducimus explicabo reiciendis in culpa natus error! Nihil, eveniet sed!</p>
 </body>
 </html>

2.2 文本水平对齐方式

属性名：text-align

取值：

属性值	效果
left	左对齐
center	水平居中对齐
right	右对齐

注意点：

如果需要让文本水平居中，text-align属性给文本所在标签(文本的父元素)设置

text-align: center 能让哪些元素水平居中

文本
span标签、a标签
input标签、img标签

注意点：

如果需要让以上元素水平居中，text-aligh: center 需要给以上元素的父元素设置

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>文本水平对齐方式</title>
     <style>
         h1{
             /* text-align: right; */
             /* text-align: center; */
             text-align: left;
         }
         body{
             text-align: right;
         }
     </style>
 </head>
 <body>
     <h1>新闻标题</h1> 
     <img src="./images/car.jpg">
 </body>
 </html>

2.3 文本修饰

属性名：text-decoration

取值：

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

注意点：

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>文本修饰</title>
     <style>
         a{
             text-decoration: none;
         }
         div{
             text-decoration: underline;
         }
         p{
             text-decoration: line-through;
         }
         span{
             text-decoration: overline;
         }
     </style>
 </head>
 <body>
     <div>div</div>
     <p>ppppp</p>
     <span>span</span>
     <a href="http://www.baidu.com">跳转到百度</a>
 </body>
 </html>

三、行高(上间距+文本高度+下间距)

作用：控制一行的上下行间距属性名：line-height 取值：

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

应用：

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

行高与font连写的注意点：

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>行高</title>
     <style>
         p{
             /* line-height: 50px; */
             line-height: 1.5;
             /* 66px 宋体 倾斜 加粗 行高是2倍 */
             font:italic bold 66px/2 宋体
         }
     </style>
 </head>
 <body>
     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus culpa est iusto sequi praesentium dolor rem quia. Eum ea, repudiandae officia nesciunt dignissimos impedit facilis quod vero, necessitatibus quis dolor!
         Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus culpa est iusto sequi praesentium dolor rem quia. Eum ea, repudiandae officia nesciunt dignissimos impedit facilis quod vero, necessitatibus quis dolor!
         Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus culpa est iusto sequi praesentium dolor rem quia. Eum ea, repudiandae officia nesciunt dignissimos impedit facilis quod vero, necessitatibus quis dolor!
         Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus culpa est iusto sequi praesentium dolor rem quia. Eum ea, repudiandae officia nesciunt dignissimos impedit facilis quod vero, necessitatibus quis dolor!
     </p>
 </body>
 </html>

四、拓展

4.1 颜色常见取值(了解)

取值类型1：关键字

常见颜色取值：

red : 红色
green: 绿色
blue：蓝色
yellow：黄色
orange:橘色
skyblue：天蓝色
pink: 粉色
……

取值类型2：rgb表示法

每项取值范围：0~255

常见颜色取值：

rgb(255,0,0): 红色
rgb(0,255,0): 绿色
rgb(0,0,255): 蓝色
rgb(0,0,0): 黑色
rgb(255,255,255): 白色
……

取值类型3：rgba表示法

其实，比rgb表示法多了个a，a表示透明度

a的取值范围：0~1

1：完全不透明
0：完全透明

省略写法：

rgba(0,0,0,0.5)可以省略写成rgba(0,0,0,.5)

取值类型4：十六进制表示法

取值范围：

两个数字为一组，每个数字的取值范围：0~9，a，b，c，d，e,f

省略写法：

如果三组中，每组数字都相同，此时可以每组可以省略只写一个数字
正确写法：#ffaabb 改写成 #fab

常见取值：

#fff : 白色
#000：黑色

注意点：

类似于：#ffaabc不能改写成#fabc
实际开发中会直接使用测量工具直接得到颜色，不需要前端自己设计颜色，直接复制粘贴即可。

4.2 标签水平居中方法总结 margin: 0 auto

如果需要让div、p、h(大盒子)水平居中，直接给当前元素本身设置即可

margin:0 auto一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签水平居中</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            margin:0 auto;
        } 
    </style>
</head>
<body>
    <div></div>
</body>
</html>