前端必知：8.字体的设置

小姚学前端

已于 2023-07-09 17:10:19 修改

阅读量1.9k

点赞数 3

分类专栏： HTHL+CSS 文章标签：前端

于 2023-07-09 17:08:30 首次发布

本文链接：https://blog.csdn.net/qq_52799985/article/details/131624868

版权

HTHL+CSS 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

当涉及到CSS字体设置时，有很多属性可以用来调整字体的外观和样式。以下是常用的CSS字体设置属性及其用法示例：

font-family: 设置字体系列。

body {
  font-family: Arial, sans-serif;
}

h1 {
  font-size: 24px;
}

font-weight: 设置字体粗细。

p {
  font-weight: bold;
}

font-style: 设置字体样式（常用的有斜体）。

em {
  font-style: italic;
}

text-decoration: 设置文本修饰线（如下划线）。

a {
  text-decoration: underline;
}

text-transform: 设置文本转换（如大写、小写）。

h2 {
  text-transform: uppercase;
}

letter-spacing: 设置字母间距。

h3 {
  letter-spacing: 2px;
}

line-height: 设置行高。

p {
  line-height: 1.5;
}

word-spacing: 设置单词间距。

p {
  word-spacing: 4px;
}

font-variant: 设置字体变体（如小型大写字母）。

h4 {
  font-variant: small-caps;
}

font-stretch: 设置字体拉伸（如压缩或扩展）。

p {
  font-stretch: condensed;
}

font-size-adjust: 设置字体大小调整（用于优化字体的显示）。

body {
  font-size-adjust: 0.5;
}

font-smooth: 设置字体平滑（用于控制字体在屏幕上的平滑程度）。

body {
  font-smooth: always;
}

text-shadow: 设置文本阴影。

h1 {
  text-shadow: 2px 2px 4px #000000;
}

text-align: 设置文本对齐方式。

p {
  text-align: center;
}

white-space: 设置空白处理方式（如换行）。

pre {
  white-space: pre-wrap;
}

text-overflow: 设置文本溢出处理方式。

div {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

line-break: 设置换行规则。

p {
  line-break: strict;
}

hyphens: 设置断词规则。

p {
  hyphens: auto;
}

font-display: 设置字体加载行为。

@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  font-display: swap;
}

body {
  font-family: 'CustomFont', sans-serif;
}

这些是一些常用的CSS字体设置属性，可以帮助你自定义字体的外观和样式。你可以根据需求使用这些属性来创建所需的字体效果。

相关完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体设置</title>
    <style>
        .txt1{
            font-style: normal;
            /* 设置字体不影响其他的设置 */
            color: aqua;
            font-weight: 400;
            font-size: 20px;
        }
        .txt2{
            font-style: italic;
            /* 加粗 */
            font-weight:400;
            font-size: 12px;
        }
        .txt3{
            color: #04be02;
            font-size: 40px;
            /* 加逗号，先使用前面的，前面的找不到再使用后面的 */
            font-family:'楷体','华文琥珀','serif';
        }
        .txt4{
            color: #04be02;
            font-size: 40px;
            /* 加逗号，先使用前面的，前面的找不到再使用后面的 */
            font-family:'serif','楷体';
        }
        .txt5{
            color: #04be02;
            font-size: 40px;
            font: normal bold 30px '华文琥珀','楷体';
            font: 40px '微软雅黑';
        }
    </style>
</head>
<body>
    <!-- 
     font-style  设置字体的样式
     值：
         normal  字体正常
         italic  设置字体为斜体
    
    font-weight  设置字体是否加粗
    值：  
          normal 默认
          bold 加粗
          bolder 相对bold加粗 
          他的值也可以是具体的整百数字，范围是100-900
          400 -> normal
          700 ->  bold
          900 -> bolder
    font-size  设置所修饰的字体的大小
          1.目前浏览器默认字体大小是16px
          2.pc浏览器能够接受的最小字体大小为12px
    font-family  设置文字的字体
           可以同时设置多个字体，形如：
           font-family：'a','b','c'....;
           含义是 在客户端的设备上匹配a字体，如果没有a字体，则继续匹配b字体
           依次进行匹配，直到匹配成功即可显示匹配到的字体。
        通用字体
           1.serif  有衬线（类似于锐化）
           2.sans-serif  无衬线

    font 也是一个复合型css属性 
           可以按照下面的顺序书写
           font：style  weight size family;
           注意：style和weight不是必须写入的内容，如果简写必须
           需要有 font-size 和font-family
           font：size family；
    
    
     -->
    <em class="txt1">驱除鞑虏，恢复中原</em>
    <p class="txt2">驱除鞑虏，恢复中原</p>
    <p class="txt3">西安事变</p>
    <p class="txt4">西安事变</p>
    <p class="txt5">百团大战</p>
</body>
</html>