文本 字体 常用字体详解

文本属性是什么

文本属性用于控制一段文本的外观。

文本属性列表

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-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.自定义字体免费字库

• www.iconfont.com

• 英文字库：谷歌字库