CSS属性-字体

最新推荐文章于 2024-08-20 13:42:14 发布

DustinWangq

最新推荐文章于 2024-08-20 13:42:14 发布

阅读量58

点赞数

分类专栏： # HTML-CSS 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/Welitsi/article/details/131985135

版权

HTML-CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文介绍了CSS中用于设置文字样式的几个关键属性：font-size用于调整文字大小，可以使用像素、em等单位；font-family定义字体，支持多个备选字体；font-weight设定文字粗细，normal和bold是最常见值；font-style用于设置文字是否斜体；line-height控制行间距；最后，font是这些属性的缩写形式。

摘要由CSDN通过智能技术生成

font-size

font-size 决定文字的大小

1.常用的设置

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      font-size: 32px;
    }
    p {
      /* 父元素的2倍 = div * 2 = 32 * 2 */
      font-size: 2em;
    }
    span {
      /* 父元素的2倍 = div * 2 = 32 * 2 */
      font-size: 200%;
    }

  </style>
</head>
<body>
  <div>我是div元素</div>
  <div>
    <p>我是p元素</p>
    <span>我是span元素</span>
  </div>
</body>

在这里插入图片描述

font-family

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

font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;

font-weight

font-weight 用于设置文字的粗细（重量）

1.常见的取值

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

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

font-style

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

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

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

font-variant

font-variant 可以影响小写字母的显示形式

variant是变形的意思;

可以设置的值如下

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

在这里插入图片描述

line-height

line-height 用于设置文本的行高

行高可以先简单理解为一行文字所占据的高度

在这里插入图片描述

行高的严格定义是：两行文字基线（baseline）之间的间距
基线（baseline）：与小写字母x最底部对齐的线

在这里插入图片描述

注意区分height和line-height的区别

height：元素的整体高度
line-height：元素中每一行文字所占据的高度

应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中

让line-height等同于height

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 添加2倍文字大小的行高 */
    p {
      line-height: 2;
    }
    /* 让文本垂直居中 */
    div {
      height: 32px;
      background-color: skyblue;
      line-height: 32px;
    }
  </style>
</head>
<body>
  <h1>line-height的基本使用</h1>
  <p>CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. It uses color-related properties and values to color the text, backgrounds, borders, and other parts of elements in a document. This specification describes color values and properties for foreground color and group opacity. These include properties and values from CSS level 2 and new values.</p>
  <div>
    我是div中的一行文本
  </div>
</body>
</html>

在这里插入图片描述

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: oblique small-caps bold 24px/38px '宋体';

在这里插入图片描述

DustinWangq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS属性-字体

font-size。
复制链接

扫一扫

专栏目录