如何在Stylus中优雅地添加自定义字体而不覆盖原有字体？

在Stylus中优雅地添加自定义字体而不覆盖原有字体，可以通过使用@font-face规则来实现。这种方法允许你引入自定义字体，同时保留原有的字体栈。以下是一个示例代码，展示了如何实现这一点：

// 定义自定义字体
@font-face
  font-family: 'MyCustomFont'
  src: url('path/to/MyCustomFont.woff2') format('woff2'),
       url('path/to/MyCustomFont.woff') format('woff')
  font-weight: normal
  font-style: normal

// 使用自定义字体，同时保留原有字体栈
body
  font-family: 'MyCustomFont', 'Helvetica Neue', Helvetica, Arial, sans-serif

解释：

1. @font-face 规则：

   • font-family: 'MyCustomFont'：定义自定义字体的名称。
   • src：指定字体文件的路径和格式。通常建议提供多种格式（如woff2和woff）以确保兼容性。
   • font-weight 和 font-style：定义字体的粗细和样式。

2. 应用字体：

   • 在body选择器中，将MyCustomFont作为首选字体，后面跟着原有的字体栈（如'Helvetica Neue', Helvetica, Arial, sans-serif）。这样，如果MyCustomFont无法加载，浏览器会依次尝试使用后面的字体。

注意事项：

• 字体文件路径：确保src中的路径正确指向字体文件。
• 字体格式：提供多种字体格式（如woff2、woff）以提高兼容性。
• 字体栈：在font-family中保留原有的字体栈，以确保在自定义字体无法加载时，页面仍能正常显示。

通过这种方式，你可以在不覆盖原有字体的情况下，优雅地添加自定义字体。