文本属性是什么
文本属性用于控制一段文本的外观。
文本属性列表
属性 | 描述 |
---|---|
text-align | 规定文本的水平对齐方式 |
text-decoration | 规定文本装饰 |
text-shadow | 添加文本阴影 |
text-indent | 规定文本块(text-block)中的的首行缩进 |
text-transform | 控制文本大小写 |
word-spacing属性 | 文本之间的空白。 |
letter-spacing属性 | 控制字符之间的间距 |
text-overflow属性 | 文本溢出隐藏 |
text-align属性
定义
定义文本的水平对齐方式。(不能控制垂直)
语法
container{
text-align:参考属性值;
}
text-align: left | center | right | justify
}</pre>
属性值 left : 规定文本左对齐。默认值 center: 规定文本水平居中对齐。 right: 规定文本右对齐。 justify: 规定文本两端对齐。
text-decoration属性
定义 定义文本修饰线。
语法
.container{
text-decoration:参考属性值;
}
属性值
overline: 添加上划线
line-through : 添加删除线
underline: 添加下划线
none: 取消修饰线。默认值
text-shadow属性
定义 定义文本阴影。
语法
.container{
text-shadow:参考属性值;
}
属性值
x-offset: 设置水平偏移。单位是像素。正直向右,负值向左。
y-offset:设置垂直偏移。单位是像素。正值向下,负值向上。
blur: 设置模糊半径。数值越大越模糊。
color:设置阴影的颜色。
text-indent属性
定义 定义文本缩进。
语法
.container{
text-indent:参考属性值;
}
属性值
-
相对值:
em: em表示一个字符,使用字符设置文本缩进。缩进2个字符,就是2em。 推荐
rem
%
vh/vw
-
绝对值
- px:使用像素设置文本缩进。不推荐。
text-transform属性
定义 定义英文字母的小写转换。
语法
.container{
text-transform:参考属性值;
}
属性值
none : 默认值。对原字母不进行转换。
capitalize:文本中的每个单词以大写字母开头。(转成大写字母开头)
uppercase: 定义仅有大写字母。(全部转成大写字母)
lowercase: 定义无大写字母,仅有小写字母。(全部转成小写字母)
字体属性
字体属性是一个设置字体的样式
字体属性列表
属性 | 描述 |
---|---|
font-family属性 | 指定元素的字体名称或字体家族名称。 |
font-size属性 | 设置页面字体的大小。 |
font-weight属性 | 定义页面字体的粗细。字体的粗细共有9个级别。从100 - 900 |
line-height属性 | 设置字体行高。 |
font-style属性 | 用于定义字体风格。风格指字体是否倾斜。 |
font-variant属性 | 定义小型大写字母。 |
font复合属性 | font复合属性用于把多个字体属性写在一个声明里。 |
@font-face规则 | 它允许网页开发者为其网页指定在线字体 |
@font-face
定义:
用户定义元素的自定义字体
什么是自定义字体?
自定义字体是非系统字体。也是非安全字体
创建自定义字体
1.确定路径:把自定义字体文件复制到项目项目下
1.2确定文件位置:引用在线字体。在线字体使用绝对地址来引用字体文件
2.添加:使用@font-face规则把自定义字体文件添加到本地字库系统中
3.引用:使用font-family引入自定义字体。
什么是安全字体?
安全字体就是系统字体
系统字体就是安全字体
设置font-family首选安全字体
自从@font-face规则出现后我们可以在页面引入非安全字体
语法
@font-face{/*大括号:设置引入自定义字体规则*/
/*font-family 是规则符,不是属性。用于描述向系统字体列表中添加新字体的名称*/
font-family:'自定义字体名称';
/*url:是指定自定义文件的路径(相对路劲/绝对路劲)*/
url('自定义字体文件'.otf);
}
body{
font-family:'serif';
}
/*第二步:向元素应用自定义字体*/
#logo h2{
font-family:;
}
}
6.自定义字体免费字库
英文字库:谷歌字库