阿ken的HTML、CSS的入门指南（三）

您所在的位置：网站首页 › font-face属性 › 阿ken的HTML、CSS的入门指南（三）

阿ken的HTML、CSS的入门指南（三）

2023-03-30 02:42| 来源: 网络整理| 查看: 265

感激相遇你好我是阿ken

作者：请叫我阿ken 链接：juejin.cn/user/109118… 来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触HTML以及好久不看想要复习的小伙伴

🌊🌈关于内容： 3.1 字体样式属性 3.1.1 font-size：字号大小

CSS长度单位：

相对长度单位说明em相对于当前对象内文本的字体尺寸px像素，最常用，推荐使用绝对长度单位说明in英寸cm厘米mm毫米pt点

实例1：

p { font-size: 12px; } 复制代码 3.1.2 font-family：字体样式

实例2：

body { font-family: "华文彩云", "宋体", "黑体"; } 复制代码

应用字体样式时，会首选华文彩云，如果用户笔记本中没有安装该字体，则选择宋体，如果用户笔记本中没有安装该字体，则选择黑体，如果用户笔记本中没有安装该字体，则选择浏览器默认字体。

中文字体要加英文引号，英文字体不需要加引号且在设置英文字体时，英文字体名必须位于中文字体名之前：

实例3：

body { font-family: Arial, "华文彩云", "宋体", "黑体"; }/*正确的书写方式*/ 复制代码 body { font-family: "华文彩云", "宋体", "黑体", Arial; }/*错误的书写方式*/ 复制代码

如果字体名中包含空格、#、￥等符号，则该字体必须加英文状态下的单引号或双引号\

实例4：

{ font-family: "Times New Roman"; } 复制代码 3.1.3 font-weight：字体粗细

font-weight可用属性值：

值描述normal默认值。定义标准的字符bold定义粗体字符bolder定义更粗的字符lighter定义更细的字符100~900（100的整数倍）定义由细到粗的字符。其中400等同于normal，700等同于bold，值越大字体越粗

实际中常用的font-weight的属性值为normal和bold，用来定义正常或加粗显示的字体。

3.1.4 font-style：字体风格

该属性用于定义字体风格，如设置斜体、倾斜或正常字体。

normal：默认值，浏览器会显示标准的字体样式。 italic：浏览器会显示斜体的字体样式。 oblique：浏览器会显示倾斜的字体样式。

italic和oblique都用于定义斜体，两者在显示效果上并没有本质区别，但实际工作中常使用italic 。

3.1.5 font：综合设置字体样式

基本语法格式：

选择器{ font: font-style font-weight font-size/line-height font-family; } 复制代码

使用font属性，必须按上面语法格式中的顺序书写，各个属性以空格隔开。其中line-height指的是行高。

实例5：

p { font-family: Arial, "宋体"; font-size: 30px; font-style: italic; font-weight: bold; font-variant: small-caps; line-height: 40px; } 复制代码

等价于：

p { font: italic small-caps bold 30px/40px Arial, "宋体"; } 复制代码

其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

实例6：

font属性 .one{ font: italic 18px/30px "隶书"; } /*该font内有font-size和font-family，故class="one"的属性应用该css样式*/ .two{ font: italic 18px/30px; } /*这个font里有font-size没有font-family，故该css样式不会被应用*/ 我是阿ken 不懂的可以私聊我复制代码 3.1.6 @font-face 属性

@font-face属性是CSS3的新增属性，用于定义服务器字体。

通过@font-face属性，开发者可以在用户计算机未安装字体时，使用任何喜欢的字体。

在下面的语法中，font-family用于指定该服务器字体的名称，该名称可以随意定义；src属性用于指定该字体文件的路径。

font-face属性基本语法：

@font-face{ font-family: 字体名称; src: 字体路径; } 复制代码

实例7：

@font-face 属性 @font-face { font-family: jianzhi; /*服务器字体名称*/ src: url(font/FZJZJW.TTF); /*服务器字体名称*/ } p { font-family: jianzhi; font-size: 32px; } 十年寒窗无人问一夜扬名人皆知复制代码

运行结果：

在这里插入图片描述

3.1.7 word-wrap 属性

word-wrap属性用于实现长单词和URL地址的自动换行

基本语法：

选择器 { word-wrap: 属性值; } 复制代码

word-wrap属性值：

值描述normal只在允许的断字点换行（浏览器保持默认处理）break-word在长单词或URL地址内部进行换行

实例8：

word-wrap 属性 p { width: 100px; height: 100px; border: 1px solid #000; } .break_word { word-wrap: break-word; } /*网址在段落内部换行*/ word-wrap: normal; 我是阿ken word-wrap: break-word; 学会扎根, 然后成长复制代码

运行结果：

在这里插入图片描述

3.2 文本外观属性 3.2.1 color：文本颜色

color属性用于定义文本的颜色

预定义的颜色值，如red、green、blue等。十六进制，如 #FF0000，#FF6600等。实际工作中，十六进制是最常用的定义颜色的方式。 RGB代码，如红色可以表示为 rgb(255，0，0) 或 rgb(100％，0％，0％)。

注意：如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0％

3.2.2 letter-spacing：字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

3.2.3 word-spacing：单词间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-sapcing定义的为英文单词之间的差距。

实例9：

word-spacing和letter-spacing .letter { letter-spacing: 20px; } .word { word-spacing: 20px; } letter spacing(字母间距) word spacing word spacing(单词间距) 复制代码

运行结果：

在这里插入图片描述

3.2.4 line-height：行间距

line-height属性用于设置行间距，一般称为行高。

line-height常用的属性单位有 3种，分别为像素px，相对值em和百分比 % ，实际工作中使用最多的是像素px。

3.2.5 text-transform：文本转换

text-transform属性用于控制英文字符的大小写，其可用属性值：

属性值解释none不转换（默认值）capitalize首字母大写uppercase全部字符转换为大写lowercase全部字符转换为小写 3.2.6 text-decoration：文本装饰

text-decoration属性用于设置文本的下划线、上划线、删除线等装饰效果，其可用属性值：

属性值解释none没有装饰（默认值）underline下划线overline上划线line-through删除线

text-decoration后可以赋多个值，用于给文本添加多种显示效果。

例如希望文字同时有下划线和删除线效果，就可以将underline和line-through同时赋给text-decoration

实例10：

文本装饰 text-decoration .one { text-decoration: underline; } .two { text-decoration: overline; } .three { text-decoration: line-through; } .four { text-decoration: underline line-through; } 设置下划线(underline) 设置上划线(overline) 设置删除线(line-through) 同时设置下划线和删除线(underline line-through) 复制代码

运行结果：

在这里插入图片描述

3.2.7 text-align：水平对齐方式

text-align属性用于设置文本内容的水平对齐，相对于html中的align对齐属性，其可用属性值：

属性值解释left左对齐（默认值）right右对齐center居中对齐

实例11：

h2 { text-align: center; } 复制代码

注意： 1.text-align属性仅适用于块级元素，对行内元素无效 2.如果需要对图像设置水平对齐，可以对图像添加一个父标记如< p>或< div>，然后对父标记应用text-align属性，即可实现图像的水平对齐。

3.2.8 text-indent：首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数，或相对于浏览器窗口宽度的百分比％，允许使用负值，建议使用em作为设置单位。\

实例12：

首行缩进 text-indent p { font-size: 14px; } .one { text-indent: 2em; } .two { text-indent: 50px; } 这是段落1, text-indent 属性用于设置首行文本的缩进, text-indent: 2em; 这是段落2, text-indent 属性用于设置首行文本的缩进, text-indent: 50px; 复制代码

运行结果：

在这里插入图片描述

注意： text-indent属性仅使用于块级元素，对行内元素无效。

3.2.9 white-space：空白符处理

使用html制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白。

在CSS中，使用white-space属性可设置空白符的处理方式，其属性值如下：

属性值解释normal(默认值)，文本中的空格、空行无效，满行（到达区域边界）后自动换行pre预格式化，按文档的书写格式保留空格、空行原样显示nowrap空格空行无效，强制文本不能换行，除非遇到换行标记< br/>。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条

实例13：

while-space 空白符处理 .one { white-space: normal; } .two { white-space: pre; } .three { white-space: nowrap; } 我是阿 ken 我是阿 ken 我是阿 ken 复制代码

运行结果：

在这里插入图片描述

3.2.10 text-shadow：阴影效果

使用text-shadow属性可以为页面中的文本添加阴影效果，其基本语法为：

选择器 { text-shadow: h-shadow v-shadow blur color; } 复制代码

h-shadow 用于设置水平阴影的距离，v-shadow 用于设置垂直阴影的距离

blur用于设置模糊半径，color用于设置阴影颜色

实例14：

text-shadow 属性 p { font-size: 50px; text-shadow: 10px 10px 10px red;/*设置文字阴影的距离、模糊半径和颜色*/ } Hello 阿ken 复制代码

运行结果：

在这里插入图片描述

3.2.11 text-overflow：标示对象内溢出文本

text-overflow属性用于标示对象内溢出的文本

基本语法：

选择器 { text-overflow: 属性值; } 复制代码

属性值如下：

属性值解释clip修剪溢出文本，不显示省略标记 “…”ellipsis用省略标记 “…”标示被修剪文本，省略标记插入的位置是最后一个字符

案例15：

text-overflow 属性 p { width: 100px; height: 100px; border: 1px solid #000; white-space: nowrap; /*强制文本不能换行*/ overflow: hidden; /*修剪溢出文本*/ text-overflow: ellipsis;/*用省略标记标示被修剪的文本*/ } 把很好的一段文本中溢出的内容隐藏，出现省略号复制代码

运行结果：

在这里插入图片描述

实现省略号标示溢出文本的效果需要以下三行代码且缺一不可：

/*首先要为包含文本的对象定义宽度*/ /*例如： p{ width: 100px; height: 100px; }*/ white-space: nowrap; /*强制文本不能换行*/ overflow: hidden; /*修剪溢出文本*/ text-overflow: ellipsis;/*用省略标记标示被修剪的文本*/ 复制代码

今日入门学习暂时告一段落

Peace

🌊🌈往期回顾：

阿ken的HTML、CSS的入门指南(一)_HTML基础阿ken的HTML、CSS的入门指南(二)_HTML页面元素和属性阿ken的HTML、CSS的入门指南(三)_文本样式属性阿ken的HTML、CSS的入门指南(四)_CSS3选择器阿ken的HTML、CSS的入门指南(五)_CSS盒子模型阿ken的HTML、CSS的入门指南(六)_CSS盒子模型阿ken的HTML、CSS的入门指南(七)_CSS盒子模型阿ken的HTML、CSS的入门指南(八)_CSS盒子模型阿ken的HTML、CSS的入门指南(九)_浮动与定位阿ken的HTML、CSS的入门指南(十)_浮动与定位阿ken的HTML、CSS的入门指南(十一)_浮动与定位

🌊🌈关于后记：

感谢阅读，希望能对你有所帮助博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我感谢每一位小伙伴不吝赐教

原创不易，「点赞」+「评论」谢谢支持❤

【本文地址】

公司简介

联系我们