css 设置 字体微软雅黑

要在 CSS 中设置字体为“微软雅黑”（Microsoft YaHei），你可以使用

font-family

属性。由于“微软雅黑”包含中文字符，所以在 CSS 中需要使用英文双引号将其括起来。此外，为了兼容性，通常还会指定一个备选字体，以防目标字体在某些系统上不可用。

下面是一个简单的示例，展示了如何在 CSS 中设置字体为“微软雅黑”：

.custom-title{font-family:'Microsoft YaHei', Arial, sans-serif;/* 其他样式 */}

在这个示例中，

.custom-title

类的字体将首先尝试使用“微软雅黑”。如果该字体不可用，则会使用

Arial

字体，如果

Arial

也不可用，则会使用默认的

sans-serif

字体。

示例代码

假设你想在

el-collapse-item

的自定义标题中使用“微软雅黑”字体，你可以这样做：

<template><el-collapse><el-collapse-item><template#title><divclass="custom-title">
          {{ customTitle }}
        </div></template>
      这是内容
    </el-collapse-item></el-collapse></template><script>exportdefault{data(){return{customTitle:'自定义标题'};}};</script><stylescoped>.custom-title{color: red;font-size: 18px;font-family:'Microsoft YaHei', Arial, sans-serif;line-height: 1.5;/* 更多自定义样式 */}</style>

在这个示例中，我们设置了

.custom-title

的

font-family

为

'Microsoft YaHei', Arial, sans-serif

。这意味着字体首选“微软雅黑”，如果不可用，则尝试使用

Arial

，最后如果两者都不可用，则使用默认的

sans-serif

字体。

注意事项

• 确保你的系统或目标用户的系统上安装了“微软雅黑”字体。
• 如果你的目标用户可能使用不同的操作系统（例如 Windows 和 macOS），考虑提供一个跨平台的字体选项。
• 为了更好的兼容性，可以考虑使用字体栈（多个备选字体）。

使用

font-family

属性，你可以轻松地更改文本的字体，从而实现更加一致的设计效果。