😉CSS样式属性之字体

一.写在前面

大家好🐧我是MariaH一名前端的初学者，这篇文章我们将要学习CSS文本属性的字体属性，字体属性在我们编写网页的时候主要用来设置文字的大小和颜色和文字字体类型，好了废话不多说了，让我们开始吧！如果你对前端的技术比较感兴趣或者对Node服务端的知识比较感兴趣可以关注我，后续会不定时更新相关内容。

二.font-size

font-size决定文字的大小和文字的尺寸，常见的设置方式:

具体数值+单位比如 100px，也可以使用em单位，1em代表100%，2em代表200%，0.5em代表50%
百分比基于父元素的font-size计算，比如50%表示等于父元素font-szie的一半。

css 复制代码

.fontStyle {
  font-size: 2em;
  color: aqua;
}

💡提示：如果对font-size设置百分比，相当于父元素的字体的大小。

三.font-family(仅需设置一次)

font-family用于设置文字的字体名称，可以设置1个或者多个字体名称，浏览器会选择列表中第一个计算机上安装的字体，或者通过@font-face指定的可以直接下载的字体，如下是淘宝设置的字体。

💡提示：淘宝中为什么会给这么多元素设置字体？因为担心某些浏览器会对某些元素设置某些字体。

css 复制代码

font-family:'Franklin Gothic Medium','Arial Narrow', Arial, sans-serif;

四.font-weight

font-weight用于设置文字的粗细，常见的取值如下：

100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量.
normal：等于400
bold：等于700

💡提示：strong、b、h1~h6等标签的font-weight默认就是bold

css 复制代码

.fontStyle {
  font-size: 2em;
  color: aqua;
  font-weight: 700;
}

五.font-style

font-style用于设置文字的常规，斜体显示。

normal：常规显示
italic(斜体)：用字体的斜体显示(通常会有专门的字体)
oblique(倾斜):文本倾斜显示(仅仅是让文字倾斜)

css 复制代码

.fontStyle {
  font-size: 20px;
  font-weight: 700;
  /* 斜体：字体本身支持斜体时，显示的斜体 */
  font-style: italic;
  /* 斜体：让字体进行倾斜 */
  font-style: oblique;
  color: aqua;
}

💡提示： em、i、cite、address、var、dfn等元素的font-style默认就是italic

六.font-variant

font-variant可以影响小写字母的显示形式variant是变形的意思，可以设置如下值。

normal：常规显示
small-caps：将小写字母替换为缩小过的大写字母

css 复制代码

.fontStyle {
  font-size: 30px;
  color: blueviolet;
  font-variant: small-caps;
}

我们设置的HTML标签中的内容

css 复制代码

<div class="fontStyle">abcdefghijklmnopqrstuvwxyz</div>

七.line-height(常用)

line-height用于设置文本的行高，行高可以先简单理解为一行文字所占据的高度。

为什么文本需要行高哪？因为在阅读的时候如果没有行高网页展示的内容的阅读性会变差，行高的严格定义是：两行文字基线（baseline）之间的间距，基线，与小写字母x最底部对齐的线。

css 复制代码

.fontStyle {
  width: 800px;
  height: 300px;
  line-height: 300px;
  font-size: 30px;
  color: blueviolet;
  font-variant: small-caps;
  background-color: aqua;
}

💡提示：注意区分height和line-height的区别，height：元素的整体高度，line-height：元素中每一行文字所占据的高度，假设div中只有一行文字，如何让这行文字在div内部垂直居中，让line-height等同于height

八.font

font是一个缩写属性，font 属性可以用来作为font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，font-style font-variant font-weight font-size/line-height font-family。

font-style、font-variant、font-weight可以随意调换顺序也可以省略。

line-height可以省略，如果不省略，必须跟在font-size后面。

font-size、font-family不可以调换顺序，不可以省略。

七.总结

这篇到这里就结束了😉，这篇文章我们学习了字体样式的设置，如果我们需要设置文字的大小我们可以使用设置font-size其次我们可以通过设置font-family来选择自己需要使用的字体，等等，当我们掌握了这些的CSS属性的内容我们就可以在编写网页的时候对自己样式进行设置~