如何在Stylus中优雅地扩展网页字体？

在Stylus中优雅地扩展网页字体可以通过以下几种方式实现，这些方法不仅能够提升代码的可维护性，还能确保字体样式的一致性。

1. 使用变量定义字体

通过定义变量来存储字体名称和大小，可以在整个样式表中重复使用这些变量，便于统一管理和修改。

// 定义字体变量
$font-family = 'Helvetica Neue', Arial, sans-serif
$font-size-base = 16px

body
  font-family: $font-family
  font-size: $font-size-base

2. 使用混合（Mixins）定义字体样式

混合（Mixins）可以让你定义一组字体样式，并在需要的地方重复使用。

// 定义字体混合
font-stack($size = $font-size-base, $weight = normal)
  font-family: $font-family
  font-size: $size
  font-weight: $weight

// 使用混合
h1
  font-stack(24px, bold)

p
  font-stack()

3. 使用嵌套和继承

通过嵌套和继承，可以减少重复代码，并使样式表更加简洁。

// 定义基础字体样式
.base-font
  font-family: $font-family
  font-size: $font-size-base

// 继承基础字体样式
h1
  @extend .base-font
  font-size: 24px
  font-weight: bold

p
  @extend .base-font

4. 使用函数动态生成字体大小

通过定义函数，可以根据不同的参数动态生成字体大小。

// 定义字体大小函数
font-size($multiplier = 1)
  return $font-size-base * $multiplier

// 使用函数
h1
  font-size: font-size(1.5)

p
  font-size: font-size()

5. 使用媒体查询调整字体大小

在不同的设备上，字体大小可能需要调整。可以通过媒体查询来实现响应式字体。

// 定义响应式字体大小
responsive-font-size($base-size, $multiplier = 1)
  font-size: $base-size * $multiplier
  @media (max-width: 768px)
    font-size: $base-size * ($multiplier * 0.8)

// 使用响应式字体大小
h1
  responsive-font-size(24px, 1.5)

p
  responsive-font-size(16px)

6. 使用@font-face引入自定义字体

如果你需要使用自定义字体，可以通过@font-face来引入。

@font-face
  font-family: 'MyCustomFont'
  src: url('fonts/MyCustomFont.woff2') format('woff2'),
       url('fonts/MyCustomFont.woff') format('woff')

// 使用自定义字体
body
  font-family: 'MyCustomFont', $font-family

7. 使用@import引入外部字体

如果你使用的是Google Fonts等外部字体服务，可以通过@import来引入。

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap')

// 使用外部字体
body
  font-family: 'Roboto', $font-family

总结

通过使用变量、混合、嵌套、继承、函数、媒体查询、@font-face和@import等技术，你可以在Stylus中优雅地扩展和管理网页字体。这些方法不仅提高了代码的可维护性，还能确保字体样式在不同设备和浏览器中的一致性。