如何在Stylus中优雅地扩展网页字体而不覆盖原有设置？

在Stylus中优雅地扩展网页字体而不覆盖原有设置，可以通过以下几种方法实现：

1. 使用 @extend 指令

@extend 指令允许你继承现有选择器的样式，而不需要重复编写代码。你可以创建一个基础字体样式，然后通过 @extend 来扩展它。

// 基础字体样式
.base-font
  font-family: Arial, sans-serif
  font-size: 16px
  line-height: 1.5

// 扩展字体样式
.extended-font
  @extend .base-font
  font-size: 18px
  font-weight: bold

2. 使用 mixin

Mixin 是一种可以重复使用的样式块。你可以定义一个包含基础字体样式的 mixin，然后在需要的地方调用它。

// 定义基础字体样式的 mixin
base-font()
  font-family: Arial, sans-serif
  font-size: 16px
  line-height: 1.5

// 使用 mixin 并扩展样式
.extended-font
  base-font()
  font-size: 18px
  font-weight: bold

3. 使用 @import 导入外部样式

如果你有多个样式文件，可以使用 @import 导入外部样式文件，并在当前文件中扩展或覆盖部分样式。

// 导入基础样式文件
@import 'base.styl'

// 扩展或覆盖样式
.extended-font
  font-size: 18px
  font-weight: bold

4. 使用 & 父选择器

如果你希望在特定上下文中扩展字体样式，可以使用 & 父选择器来嵌套样式。

// 基础字体样式
.base-font
  font-family: Arial, sans-serif
  font-size: 16px
  line-height: 1.5

// 在特定上下文中扩展字体样式
.special-context
  .base-font
    font-size: 18px
    font-weight: bold

5. 使用 @media 查询

如果你需要在不同的屏幕尺寸下调整字体大小，可以使用 @media 查询来扩展字体样式。

// 基础字体样式
.base-font
  font-family: Arial, sans-serif
  font-size: 16px
  line-height: 1.5

// 在较大屏幕上扩展字体样式
@media (min-width: 768px)
  .extended-font
    font-size: 18px
    font-weight: bold

6. 使用 @keyframes 和 animation 动态调整字体

如果你需要动态调整字体大小或样式，可以使用 @keyframes 和 animation 来实现。

// 定义动画
@keyframes font-grow
  0%
    font-size: 16px
  100%
    font-size: 18px

// 应用动画
.animated-font
  font-family: Arial, sans-serif
  animation: font-grow 2s infinite alternate

总结

通过使用 @extend、mixin、@import、& 父选择器、@media 查询以及 @keyframes 和 animation，你可以在 Stylus 中优雅地扩展网页字体而不覆盖原有设置。这些方法可以帮助你保持代码的简洁性和可维护性。