前端的文字的字体应该如何设置

矫情吗；* 2024-04-29 00:42 10阅读 0赞

要设置文字的字体，在CSS中使用`font-family`属性。这个属性可以接受一个或多个字体名称作为其值，浏览器会按照列表中的顺序尝试使用这些字体渲染文本。如果第一个字体不可用，浏览器会尝试使用列表中的下一个字体，依此类推。

#### 字体设置示例 ####

假设你想为`.literalTitle`类设置字体，可以这样做：

.literalTitle {
        
      font-family: "Helvetica Neue", Arial, sans-serif;
    }

在这个例子中，浏览器首先尝试使用`Helvetica Neue`字体渲染`.literalTitle`类中的文本。如果`Helvetica Neue`不可用（例如，用户的系统中没有安装这个字体），浏览器会尝试使用`Arial`。如果`Arial`也不可用，它会使用系统默认的无衬线字体渲染文本。

#### 如何选择字体 ####

*  **通用字体系列**：`sans-serif`（无衬线）、`serif`（有衬线）、`monospace`（等宽）、`cursive`（草写）和`fantasy`（装饰）是五种基本的字体系列，几乎所有浏览器都支持。
 *  **Web安全字体**：这些是大多数操作系统中都预装的字体，如`Arial`、`Times New Roman`、`Courier New`等。
 *  **Web字体服务**：如Google Fonts、Adobe Fonts等提供了大量字体，可以通过网络链接直接在你的网页中使用。

#### 在Vue组件中设置字体 ####

假设你使用SCSS并希望在Vue组件中设置`literalTitle`的字体，可以这样写：

<template>
      <div class="literalTitle">答案</div>
    </template>
    
    <style scoped lang="scss">
    .literalTitle {
          
      font-family: "Helvetica Neue", Arial, sans-serif;
      letter-spacing: 25px; /* 调整字符间距 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin-top: -18%; /* 调整这个值来偏上 */
      color: red;
      font-size: 20px;
    }
    </style>

记得在使用特定字体之前确认该字体的可用性，特别是对于非标准字体。如果是使用Web字体服务（如Google Fonts），确保按照服务提供的指示将字体链接到你的HTML或CSS中。  
![在这里插入图片描述][9d9d0ac3017a4ed7899c03616c64a43f.gif_pic_center]

[9d9d0ac3017a4ed7899c03616c64a43f.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/e1d5ff472de2405488d6db84ad2f4d36.gif