CSS常见属性之字体属性和文本属性
|
122
|
前端
|

3176 字
|
13 分钟

字体属性

字体大小

这里我们都调整过，这里就迅速过一遍。

 <!DOCTYPE html>
 <html lang="zh-CN">
 ​
 <head>
     <meta charset="UTF-8">
     <title>常用的字体属性</title>
     <style>
         .ttdr1{
             font-size: 40px;
         }
         .ttdr2{
             font-size: 30px;
         }
         .ttdr3{
             font-size: 20px;
         }
         .ttdr4{
             font-size: 20px;
         }
     </style>
 </head>
 ​
 <body>
     <div class="ttdr1">ttdr的菜鸟空间</div>
     <div class="ttdr2">ttdr的菜鸟空间</div>
     <div class="ttdr3">ttdr的菜鸟空间</div>
     <div class="ttdr4">ttdr的菜鸟空间</div>
 ​
 </body>
 ​
 </html>

我们来体会一下效果

image-20250131181707528

对了，我们如何借助浏览器，查看某一个元素有什么样式捏？

image-20250131184033734

我们可以通过开发者工具，找到我们所编辑的样式，我们也可以对元素属性进行临时的修改，双击20px即可，我们通过调节我们会发现可能我们调节到某个值，字体大小不再改变，这是因为一些浏览器为了给用户更好的显示体验，会设置一个显示的最小值，像chrome浏览器，规定的值就是12px但是博主用edge浏览器发现没有规定最小的值，所以这里不做展示。

image-20250201173148213

我们也可以通过设置调节最小字号。如果我们不调节字体大小，那么显示的默认字体大小就是16px，当然可以通过调节默认设置来控制默认字体的大小，这也导致为了防止用户的个性化设置导致的网页字体布局混乱，我们通常不会采用默认字体大小，因为设置不同大小不同会导致很多问题，一般在开发过程中我们都会设置字体默认大小（即用元素选择器，选中整个<body来添加字体样式，后续来添加类选择器来覆盖样式即可）。

字体族

我们先来看看怎么设置字体字体。

直接上栗子吧，我们要第一行字体是微软雅黑，第二行为楷体，第三行为宋体，第四行为华文彩云（这里为了方便观察，字体大小设置为100px）

 <!DOCTYPE html>
 <html lang="zh-CN">
 ​
 <head>
     <meta charset="UTF-8">
     <title>字体族</title>
     <style>
         .ttdr1{
             font-size: 100px;
             font-family:"微软雅黑";
         }
         .ttdr2{
             font-size: 100px;
             font-family:"楷体";
         }
         .ttdr3{
             font-size: 100px;
             font-family:"宋体";
         }
         .ttdr4{
             font-size: 100px;
             font-family:"华文彩云";
         }
     </style>
 </head>
 ​
 <body>
     <div class="ttdr1">ttdr的菜鸟空间</div>
     <div class="ttdr2">ttdr的菜鸟空间</div>
     <div class="ttdr3">ttdr的菜鸟空间</div>
     <div class="ttdr4">ttdr的菜鸟空间</div>
 </body>
 ​
 </html>
image-20250201185128529

wlg豆，竟然可以用汉语来编辑了！！！但是为了考虑兼容性还是要用英文比较好。

那么我们能随便写吗，当然不可以啊，我们要看我们电脑上有什么字体，可以通过打开Windows设置——个性化——字体来查看，如果电脑上没这个字体就会默认为微软雅黑。，我们可以自己去下载字体

image-20250201185404206

那么什么是字体族捏，such as this：

 font-family:"华文彩云","楷体"，"宋体";

优先显示前面的字体，如果前面的字体错误或者不存在，则依次向后递推，如果都不存在，那么就默认为微软雅黑。

了解完了字体族，我们就要了解一下规则。

字体：

  • 衬线字体
  • 非衬线字体，

那么怎么区分捏，衬线字体的横竖撇捺很有棱角（楷体），而非衬线字体没有棱角感（微软雅黑，华文彩云），实际开发中非衬线相对比较多。

那么规则1来了：你所写的字体族必须都是衬线或者非衬线

所以我上面那个栗子并不合适。

我们再来看一下字体名称，上面提到了最好还是英文名，那么英文名是什么捏，我要不知道怎么办，当然可以去百度，或者去设置里面找字体名字（感觉百度挺方便嘻嘻）

image-20250201191106795

这里注意一些字体的空格不要漏了，少了空格也不会显示字体，而且有空格的字体必须加引号，为了少一些bug引号就一直加着吧

当然，一个字体族也需要有东西来收尾，如果我们是非衬线，则在最后加sans-serif如果都是衬线就用serif来收尾。

 font-family:"STCaiyun","Micosoft YaHei",sans-serif;
 font-family:"KaiTi",serif;

这里的两个收尾的并不是表示某一种字体，而是表示一类字体，当前面字体全部失效或者找不到的时候，收尾单词表示从电脑中找一个衬线或者非衬线字体来显示。

字体风格

属性名：font-style

说白了就就是字体是倾斜的还是不倾斜的。

常用值呢有三个：nomal(默认值)，italic（倾斜），oblique（倾斜）

我们来感受一下

         <style>
             .ttdr1 {
                 font-size: 100px;
                 font-style: normal;
             }
             .ttdr2 {
                 font-size: 100px;
                 font-style: italic;
             }
 ​
             .ttdr3 {
                 font-size: 100px;
                 font-style: oblique;
             }
         </style>
image-20250201193759238

欸两种倾斜好像并没啥区别，实际上是有的兄弟，这里涉及到字体设计的知识了。

intalic是将设计者设计的斜体显示出来，oblique则是强制转换成斜体字。大部分情况下用intalic,其在找不到设计者设计的斜体时直接具有oblique的作用。

这里有个标签<em>标签也可以使倾斜，但是要注意，这个也可以用nomal值来让它变正，这里的作用就只是强调这里的内容，关键点不在于倾斜。

字体粗细

我们之间上栗子看效果

 <!DOCTYPE html>
 <html lang="zh-CN">
 ​
 <head>
     <meta charset="UTF-8">
     <title>字体粗细</title>
         <style>
             div{
                 font-size: 100px;
             }
             .ttdr1{
                 font-weight: lighter;
             }
             .ttdr2{
                 font-weight: normal;
             }
             .ttdr3{
                 font-weight: bold;
             }
             .ttdr4{
                 font-weight: bolder;
             }
         </style>
 </head>
 ​
 <body>
     <div class="ttdr1">ttdr的菜鸟空间</div>
     <div class="ttdr2">ttdr的菜鸟空间</div>
     <div class="ttdr3">ttdr的菜鸟空间</div>
     <div class="ttdr4">ttdr的菜鸟空间</div>
 </body>
 ​
 </html>
image-20250201194853752

咦，为啥比较级和原级效果一样捏（？不知道啥意思补一下初中英语）

原来是默认字体微软雅黑只设置了三种粗细程度，所以bolder和bold，效果一样，当然除了字母，我们也可以写值，范围是1000~1000,取整百的数值，没单位哦

         <style>
             div{
                 font-size: 100px;
             }
             .ttdr1{
                 font-weight: lighter;
             }
             .ttdr2{
                 font-weight: normal;
             }
             .ttdr3{
                 font-weight: 100;
             }
             .ttdr4{
                 font-weight: 200;
             }
         </style>
image-20250201200349852

为撒100和200值又一样，还是之前的问题，设计师没设计那么多粗细的啊。

复合属性

说白了就是把上面学的综合一下

我们直接上代码

         <style>
             .ttdr1 {
                 font: bold  italic 100px "STCaiyun","Micosoft YaHei",sans-serif;
             }
         </style>

注意字体大小和字体族必须放在后两位且位置不能调换,其他的只要放在前面顺序无所谓,不同值之间空格隔开

image-20250201202054707

文本属性

文本颜色

都用过好几次了，我们直接过一下

 <head>
     <meta charset="UTF-8">
     <title>字体复合属性</title>
         <style>
             .ttdr1 {
                 color: red;
             }
         </style>
 </head>
 ​
 <body>
     <div class="ttdr1">ttdr的菜鸟空间</div>
     <div class="ttdr2">ttdr的菜鸟空间</div>
     <div class="ttdr3">ttdr的菜鸟空间</div>
     <div class="ttdr4">ttdr的菜鸟空间</div>
 </body>
image-20250201202524660

欸颜色有几种表达方式啊，不知道？戳这里

文本间距

简单来说就是文本和文本之间的距离，非常简单，直接上例子

 <head>
     <meta charset="UTF-8">
     <title>文本间距</title>
         <style>
             div {
                 font-size: 30px;
             }
             .ttdr2 {
                 color: red;
                 letter-spacing: 20px;
             }
             .ttdr3 {
                 color: blue;
                 word-spacing: 20px;
             }
         </style>
 </head>
 ​
 <body>
     <div class="ttdr1">Whoever will eventually shake the world will remain silent for a long time; Whoever will eventually light the lightning will be drifting like clouds for a long time.ttdr的菜鸟空间</div>
     <div class="ttdr2">Whoever will eventually shake the world will remain silent for a long time; Whoever will eventually light the lightning will be drifting like clouds for a long time.ttdr的菜鸟空间</div>
     <div class="ttdr3">Whoever will eventually shake the world will remain silent for a long time; Whoever will eventually light the lightning will be drifting like clouds for a long time.ttdr的菜鸟空间</div>
     <div class="ttdr4">Whoever will eventually shake the world will remain silent for a long time; Whoever will eventually light the lightning will be drifting like clouds for a long time.ttdr的菜鸟空间</div>
 </body>
image-20250201203459518

注意：

  • letter-spacing是字母间距，汉字也视为一个字母，也会受到调整。
  • word-spacing表示的是单词间距，本质上通过空格来判断单词，所以汉字不会被影响，当然汉字后面加空格会被影响，但是正常人谁这么写啊。

文本修饰

我们之间上栗子

 <!DOCTYPE html>
 <html lang="zh-CN">
 ​
 <head>
     <meta charset="UTF-8">
     <title>文本修饰</title>
         <style>
             div{
                 font-size: 30px;
             }
             .ttdr1{
                 text-decoration: overline;
             }
             .ttdr2{
                 text-decoration: underline;
             }
             .ttdr3{
                 text-decoration: line-through;
             }
             .ttdr4{
                 font-size: 40px;
                 text-decoration: none;
             }
         </style>
 </head>
 ​
 <body>
     <div class="ttdr1">ttdr的菜鸟空间</div>
     <div class="ttdr2">ttdr的菜鸟空间</div>
     <div class="ttdr3">ttdr的菜鸟空间</div>
     <a class="ttdr4" href="https://ttdr.top">ttdr的菜鸟空间</a>
 </body>
 ​
 </html>
image-20250201204148796

属性名：是text-decoration

属性值：

overline上划线

underline下划线

line-through删除线

none无格式，这里展示一个用途就是，超链接标签，正常是自带下划线的，用这个属性值可以删除下划线，<ins>（插入文本自带下划线） <del>（删除文本自带删除线）这两个标签想要去除，方法也是一样的

除了这些值我们还可以修改线的样式，比如

 text-decoration: underline dotted;

像这样，就变成了虚线，当然除了虚线还要：wavy波浪线

image-20250201204646540

我们还可以加颜色,记得不同属性值之间加空格哦，而且顺序也是无所谓哦。

 text-decoration: underline dotted red;
image-20250201204754729

文本缩进

非常简单，我们直接展示

我希望首行缩进两字符，我该怎么实现呢。

属性名：text-indent

 <head>
     <meta charset="UTF-8">
     <title>文本缩进</title>
         <style>
             div{
                 font-size: 30px;
                 text-indent: 60px;
             }
         </style>
 </head>
 ​
 <body>
     <div class="ttdr1">ttdr的菜鸟空间ttdr的菜鸟空间ttdr的菜鸟空间ttdr的菜鸟空间ttdr的菜鸟空间ttdr的菜鸟空间ttdr的菜鸟空间ttdr的菜鸟空间ttdr的菜鸟空间ttdr的菜鸟空间ttdr的菜鸟空间ttdr的菜鸟空间.</div>
     <div class="ttdr2">ttdr的菜鸟空间</div>
     <div class="ttdr3">ttdr的菜鸟空间</div>
 ​
 </body>
image-20250201205123244

这里因为字体大小是30px，所以下面缩进两字符就要设置为60px，但是好像不够灵活有没有什么办法捏，有的有的兄弟，但是不能用px单位了，这里我们放到后面盒模型再讲。

文本对齐

水平方向

属性名：text-align

属性值:left,center,right

 <head>
     <meta charset="UTF-8">
     <title>文本对齐</title>
         <style>
             .ttdr1{
                 font-size: 40px;
                 background-color: aqua;
                 text-align: left;
             }
             .ttdr2{
                 font-size: 40px;
                 background-color: aqua;
                 text-align: center;
             }
             .ttdr3{
                 font-size: 40px;
                 background-color: aqua;
                 text-align: right;
             }
         </style>
 </head>
 ​
 <body>
     <div class="ttdr1">ttdr的菜鸟空间</div>
     <div class="ttdr2">ttdr的菜鸟空间</div>
     <div class="ttdr3">ttdr的菜鸟空间</div>
 ​
 </body>
image-20250201205742106

垂直对齐

讲之前我们先来了解一个东西叫行高。

行高

，讲垂直居中之前，我们先来了解一下行高，我们直接上代码

 <head>
     <meta charset="UTF-8">
     <title>行高</title>
         <style>
             .ttdr1{
                 font-size: 40px;
                 background-color: aqua;
                 line-height: 100px;
         </style>
 </head>
 ​
 <body>
     <div class="ttdr1">ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,</div>
     <div class="ttdr2">ttdr的菜鸟空间</div>
     <div class="ttdr3">ttdr的菜鸟空间</div>
 ​
 </body>
image-20250201211111365

这里行与行之间是紧紧贴在一起的。如果我们把行高和背景颜色都改成40px

image-20250201211656809

咦，最后一行怎么又鸡脚露出来了（bushi

这里要设计一点字体设计的知识，这里就不提了，结论就是字体大小你设置成40px并不一定就是40px，如果向上面这种情况，如果文字过多，可能会导致字符部分重叠影响观感。

image-20250201211946568

我们选中来看，也是很明显有一部分重叠了，当然这也和字体有关，如果更换字体可能会有不同效果，

所以line-height和font-size一定不要相等，最好是fontsize的一点五倍~两倍

行高的写法：像素，单词(normal=40)，数值（1 2 3，normal=1），百分比（150% 200%,normal=100%）

数值用的比较多。

注意事项

我们来看一段代码

 <head>
     <meta charset="UTF-8">
     <title>行高注意事项</title>
         <style>
             .ttdr1{
                 font-size: 40px;
                 background-color: aqua;
                 line-height: 60px;
         </style>
 </head>
 ​
 <body>
     <div class="ttdr1">ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,</div>
     <div class="ttdr2">ttdr的菜鸟空间</div>
     <div class="ttdr3">ttdr的菜鸟空间</div>
 ​
 </body>

注意点1：行高过小会怎样

当我们把行距调成0的时候

image-20250201213341528

我们发现所有的字重在了一起，咦？！背景色也没了，而且好像文字最上面被吃掉了一块，（woc网页顶栏吃文字啦！！）

image-20250201213937534

一张图，相信友友们的理解能力可以理解为啥被吃了吧。

注意点2：行高是可以继承的

我们来微调一下代码

 <div class="ttdr1">ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,<span>ttdr的菜鸟空间,</span>ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,ttdr的菜鸟空间,</div>

我们增加一个span标签，把这个“美化”一下

 span{
     font-size: 200px;
     color: red;
 }
image-20250201214629074

我勒个豆，有溢出捏，说明span继承了父亲的行高，不信？我们来检查找找证据

image-20250201214838387
 span{
     font-size: 200px;
     color: red;
     line-height: 300px;
 }

我们加一个行高再来看

image-20250201215034698

我们发现中间一行的行高变成了300px，这里就是由行内最高的元素决定这一行的行高，但是我们发现这个文字好像垂直并不居中，这里我们后面再讲。

这样反复自己设置值太麻烦的，博主博主有没有更好的方法，有的有的兄弟，我们可以直接把行高改成1.5就好了啊（论数值的优越性）。

注意点3：line-height和height的关系

我们直接看例子

 ​
 <head>
     <meta charset="UTF-8">
     <title>行高注意事项</title>
         <style>
             .ttdr1{
                 font-size: 40px;
                 background-color: aqua;
                 line-height: 100px;
                 height: 300px;
             }
 ​
         </style>
 </head>
 ​
 <body>
     <div class="ttdr1">ttdr的菜鸟空间</div>
     <div class="ttdr2">ttdr的菜鸟空间</div>
     <div class="ttdr3">ttdr的菜鸟空间</div>
  
 </body>
image-20250201215858552

效果如图，height值得就是div的高，而line-height指的就是一行的高度。如果我们没有规定height那么高度就是行的总高度，这也就解释了为什么前面line-height为0的时候为什么背景色没有了。

行高的应用场景

1.调整多行文字的间距

2.单行文字垂直居中

         <style>
             .ttdr1{
                 font-size: 40px;
                 background-color: aqua;
                 line-height: 300px;
                 height: 300px;
             }
 ​
         </style>
image-20250201220405091

这里注意单行不能这么调节哦~

说了这么多，我们回归真题，垂直对齐怎么调节呢。

向上对齐这里就不说了，因为默认是这样啊，那么我们怎么调向下对齐捏（可以定位！）我们这里只用行高来调节,不妨猜一猜行高应该是多少呢？600？

image-20250201221109198

好像有点大欸，我们来算一下，这样好像560刚刚好刚好剩下的位置能放下一行字

image-20250201221331917

560，达成。

当然我们还要其他的垂直对齐方式

vertical-align

我们先上代码

 <!DOCTYPE html>
 <html lang="zh-CN">
 ​
 <head>
     <meta charset="UTF-8">
     <title>vertical-align</title>
         <style>
             div{
                 font-size: 100px;
                 height: 300px;
                 background-color: red;
             }
             span{
                 font-size: 40px;
                 background-color: blue;
                 
             }
         </style>
 </head>
 ​
 <body>
     <div class="ttdr1">ttdr的菜鸟空间<span>前端</span></div>
 ​
  
 </body>
 ​
 </html>
image-20250201221912567

我想让前端两个字上下动一下，这里就要用到vertical-align,这个元素由三个值：top、bottom、baseline

image-20250201222319456

直接看效果，除此之外还有个middle

image-20250201222507904

这个居中是在哪居中了？？

我们去MDN上找了找定义

image-20250201222616991

PS：基线不了解的兄弟可以去自己了解一下嘻嘻。

为了方便定位我们加一个X来看

image-20250201222915844

说白了就是这条白线就是居中的轴

那么图片可以调节吗

 <head>
     <meta charset="UTF-8">
     <title>vertical-align</title>
         <style>
             div{
                 font-size: 100px;
                 height: 300px;
                 background-color: red;
             }
             img {
                 height: 30px;
                 vertical-align: text-top;
             }
         </style>
 </head>
 ​
 <body>
     <div class="ttdr1">ttdr的菜鸟空间x<img src="D:\临时文件夹\CSS\b_996a38a76b05e5761d22b39b6d762af6.jpg"</div>
 ​
 </body>
 ​
image-20250201223356456

图片效果也一样哦。

注意：1.如果图片高度大于文字高度，对图片的垂直对齐操作，会执行在文字上，因为图片是这一行最高的，行高由图片决定，那么图片肯定在这一行不能动了啊，这里有点动效，博主就不展示了。

2.不能直接控制元素里的文字。

3.不能控制块级元素（such as 不能控制div）

4.能控制单元格里面的信息（这里直接上代码和例子了

 <!DOCTYPE html>
 <html lang="zh-CN">
 ​
 <head>
     <meta charset="UTF-8">
     <title>vertical-align</title>
 </head>
 ​
 <body>
     <table border="1" cellspacing="0">
         <caption>人员信息</caption>
         <thead>
             <tr>
                 <th>姓名</th>
                 <th>性别</th>
                 <th>年龄</th>
                 <th>地址</th>
             </tr>
         </thead>
         <tbody>
             <tr height="200">
                 <td valign="top">张三</td>
                 <td>男</td>
                 <td>18</td>
                 <td>北京</td>
             </tr>
             <tr>
                 <td>李四</td>
                 <td>女</td>
                 <td>20</td>
                 <td>上海</td>
             </tr>
             <tr>
                 <td>王五</td>
                 <td>男</td>
                 <td>22</td>
                <td>广州</td>
             </tr>
         </tbody>
     </table>
 </body>
 ​
 </html>
image-20250201225041795
CSSJAVA全栈前端
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
API之事件入门

							
							

							
API之入门第一课

							
							

							
JS之对象

							
							

							
JS之浅谈函数

							
							

							
JS基础之数组

							
							

							
JS基础——基础语法（1）

							
							

							
CSS之盒子模型（1）

							
							

							
CSS之其他常见元素

							
							

							
css的三大特性以及像素和颜色

							
							

							
CSS之伪元素选择器及选择器的优先级