一.字体相关样式

1.color：设置字体颜色

2.font-size：设置字体大小

3.font-family（字体族）：指定字体的类别，浏览器会自动使用它指定的类别。属性可选值如下

  • serif：衬线字体
  • sans-serif：非衬线字体
  • monospace：等宽字体

  • 可以设置多个类别，但是只有一个生效，第一个生效就用第一个，第一个不生效看第二个

    4.@font-face：可以将服务器中的字体直接提供给用户使用

    （1）可设置的属性有：font-family，src
    （2）font-family的属性值表示给字体命名
    （3）src是给出路径
    （4）但是要注意版权问题
    （5）加载速度慢

    1. @font-face{
    2. font-family:"myfont";/*起名为myfont*/
    3. src:url('./font/xxxx.ttf') format("truetype");
    4. }
    5. /*format()那里可以省略，浏览器会自动识别*/

    5.字体是矢量图，怎么放大都永远不会失帧
    6.字体文件一般占内存很小

    二.图标字体（iconfont）

    1.在网页中经常用到一些图标（比如搜索栏的放大镜图标），就想到通过图片引入图标，但是图片占位置且不灵活，所以就将图标设置为字体，用@font-face引入。还可以配合伪元素一起使用

    2.图标字体用法：

    （1）进入网址注册登录：https://www.iconfont.cn/（一定要注意版权问题）
    （2）选择想要的图标库image.png
    （3）进入后把想要的图标添加到购物车
    image.png
    （4）将购物车的图标添加到项目（推荐，这样使用方便）
    image.png
    （5）没有项目就新建一个
    image.png
    （6）然后就有三种引入方式可以选择
    image.png

    3.图标字体的引入

    （1）Unicode：

  • 将代码复制粘贴在style中

  • 下载至本地，导入到当前目录
  • 设置样式，把对应的图标编码写在标签内

image.png
image.png
（2）Font-class

  • 看图操作

image.png
image.png
（3）Symbol

  • 看图操作

image.png
image.png

4.三种引入的区别

（1）Unicode是字体在网页端最原始的应用方式

  • 支持以字体的形式修改大小颜色
  • 默认不支持多色，直接添加多色会自动去色
  • 颜色需要额外设置

（2）Font-class是Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题

  • Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题
  • Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题

（3）Symbol是全新的方式（推荐使用）

  • 支持多色图标，直接就可以引入使用
  • 也支持调整样式
  • 这种用法实际是创建了一个SVG集合，浏览器渲染SVG的性能一般

  • 该方法兼容性较差

    三.行高（line-height）

    1.行高指的是文字占有的实际高度

    （1）行高由三部分组成：文本高度，上间距，下间距
    （2）改变行高改变的是上下边距

    2.通过line-height属性来设置行高，可选值有

    （1）可以直接指定大小 px或em
    （2）也可以写整数，代表行高是字体的整数倍

    3.字体框

    （1）字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度
    （2）字体框在行高内居中，行高多于字体框的部分会上下平分，所以文字在行高内都是居中显示
    （3）行高经常用来设置文字的行间距
    （4）行间距=行高-字体大小

    四.字体的属性

    1.font-weight（字重-字体的粗细），可选值如下：

    （1）normal 默认值 不加粗
    （2）bold 加粗
    （3）100-900 提供九个值代表九个级别

    2.font-style（字体风格），可选值如下：

    （1）normal 默认值 正常字体
    （2）italic 斜体

    3.字体的简写属性：

    （1）格式：font：字体风格 字重 字体大小/行高 字体族（一定保证顺序）

  • 字体风格 字重可以省略，后两个不可省略

（2）空格间隔，省略代表取默认值
（3）例如：50px/2 “字体族”；省略了字重和字体风格，都取normal

五.文本的垂直于水平对齐

1.用text-align属性设置水平对齐，可选值如下：

  • left：左对齐
  • right：右对齐
  • center：居中对齐（两侧空白区域相同大小）

  • justify：两端对齐

    2.用vertical-align属性设置垂直对齐：

  • baseline：基线对齐（基线就是文字底部的一条线）

  • top：顶部对齐
  • bottom：底部对齐

  • middle：居中对齐

    3.插入图片底部也会有间距，图片也是基线对齐，给他设置个上对齐或下对齐就可以解决该问题，就是不让他基线对齐

    六.文本的其他属性

    1.用atext-decoration属性设置文本修饰，可选值如下：

    （1）none：无样式
    （2）underline：下划线
    （3）overline：上划线
    （4）line-through：删除线
    （5）指定好样式还可以添加颜色，虚线属性，空格隔开

  • text-decoration：underline red dotted；将下划线设置为红色虚线

    2.用white-space处理空白，可选值如下：

    （1）normal：正常
    （2）nowrap：不换行
    （3）pre 保留空白（保留空白可以达到跟代码格式一样布局）

    3.text-overflow：ellipsis；表示超出的文本内容显示省略号

    4.text-indent属性用来指定文本的第一行缩进，通常是将段落首行缩进

    （1）可用px或em单位设置，推荐em，因为em是基于当前字体大小
    （2）段落首行缩进2个格就是2em

    七.重置样式表

    1.写网页时经常会因为浏览器的默认样式干扰，比如列表前的点，这时候可以引入充值样式表来解决

    2.新建一个文件，此处命名为reset.css，然后复制进去下面的代码

  • 名字随意，但是后缀必须是.css

    3.然后通过link标签引入href中指明路径

    html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}