javascript - 在 React.js 应用程序中处理字体定义的可扩展方式

Question

通常在我的代码中，我会使用一些不同的字体和一些变体，例如:

• Arial，字体粗细:400，字体样式:普通
• Arial，字体粗细:400，字体样式:斜体
• Arial，字体粗细:700，字体样式:普通
• Helvetica, font-weight: 400, font-style: normal
• Helvetica，字体粗细:400，字体样式:斜体

为此我使用了 CSS-IN-JS 库 styled-components，所以没有使用一些 styles.css。有时设计师会来找我并要求更改，例如Arial 到 Comic Sans for font-style: italic; 和 font-weight: 400;

这不能通过在元素代码库中简单替换来编写代码，因为该字体还有其他变体。

我想尽量减少合并该更改所需的工作量，因此需要将这些字体对象隔离在一个地方。

问题:

我为此设计了 3 种方法，第 3 种似乎是最好的方法，但请根据您的经验提出建议。也许下面指定的每一个都有一些额外的缺点或优点？

方法:

第一种方法

我考虑过将这些文本定义提取到单独的 style-components 中，例如:

const ArialGeneral = styled.span`
  font-family: Arial;
  font-style: normal;
  font-weight: 400;
`

const ArialNormal = styled(ArialGeneral)``
const ArialNormalItalic = styled(ArialGeneral)`
  font-style: italic;
`

然后用相关样式包装所有出现的文本。

...
<HeroText>
  <ArialNormal>
    Welcome to our system!
  </ArialNormal>
</HeroText>
...

缺点是:

• 额外的 JSX 标签

• 可能需要一些计算成本来重新渲染这些额外的组件以及浏览器的 CSS 计算

优点:

• 我将有 1 个地方来管理所有出现的任何给定 [font-family, font-style, font-weight] 组合

第二种方法

使用相同的技术，但不是定义 styled-component，而是使用全局 styles.css，以类的形式具有基本相同的定义，例如:

.font-arial-normal {
  font-family: Arial;
  font-style: normal;
  font-weight: 400;
}

这将需要用一些类来装饰文本元素，例如:

...
<HeroText className="font-arial-normal">
  Welcome to our system!
</HeroText>
...

缺点:

• 使用两种格式 CSS-in-JS 和 styles.css

• 向 JSX 添加 classNames

优点:

• 与变体 1 相比，不需要额外的 JSX 编译资源

• 与变体 1 相同的好处

第三种方法

我在这篇文章中看到了WebType Best practices for using font-weights并且在我正在下载的网络字体包示例中，[font-family, font-style, font-weight] 的每个组合都被定义为单独的字体，例如就像上述资源中的示例(假设这些都是 font-style: normal;):

{ font-family: "Interstate Light"; font-weight: normal; }
{ font-family: "Interstate Medium"; font-weight: normal; }
{ font-family: "Interstate Regular"; font-weight: normal; }
{ font-family: "Interstate Semibold"; font-weight: bold; }
{ font-family: "Interstate Bold"; font-weight: bold; }
{ font-family: "Interstate Extrabold"; font-weight: bold; }
{ font-family: "Interstate Black"; font-weight: bold; }

缺点:

• 需要更多的初始工作(但那些 webfont 包已经提供了所需的 css)

优点:

• 除了定义字体的 fonts.css(我在所有变体中都使用它)之外，我们没有使用任何其他东西，因此消除了 使用两种格式 CSS-in-JS 和styles.css 第二种方法的问题

• 可以在 JS-IN-CSS 中使用，因为我现在正在使用它，并且代码库范围内的替换将仅更改那些字体(我正在尝试实现的)，因此与变体 1 中的好处相同

Answer 1

我认为您需要回答的最重要的事情是字体变体将在您的应用程序中出现。它们是全局性的吗？您是否只需要将它们用于某些标签(即 h1、h2 等)？您是否需要特定于少数组件的特定覆盖？

根据我的经验，通常每个应用只声明 1 或 2 种字体，而且这些通常是应用范围内的。我很少看到这些字体被非常具体地使用(即 1 或 2 个具有特定类或 ID 的元素)，而是倾向于放置在 body 上。

第一种方法

假设仅使用单一字体系列(即“Arial”、“open sans”等)，第一种方法将很难扩展。正如您所提到的，它不仅会产生很多噪音，而且如果您以字体名称命名组件，那么在您切换字体系列时它很快就会过时。这将需要对您的应用程序进行相当多的编辑。我不推荐这种方法，除非您喜欢在需要更新时编辑许多文件。

第二种方法

这种方法稍微好一些，因为您现在已经减少了 HTML 噪音，但是您在这里获得的 yield 很少。您仍然遇到与第一种方法相同的问题，只是形式略有不同。更改字体可能意味着重命名类选择器，这也意味着更新使用该类名称的任何组件。

第三种方法

在我看来，这是解决您需求的最佳方法，尽管您似乎确实希望尽可能多地将所有内容保留在样式化组件中。在这种情况下，我会稍微调整一下这种方法。

替代方法

我相信 @font-face 方法与 styled-component 的 injectGlobal 搭配使用API 将为您带来最大的好处(他们甚至在文档中提到了 @font-face!)

换掉字体系列意味着一次性更新您的@font-family 定义和更新您的font-family 声明。更好的是，您可以避免使用 .css 文件并将所有内容保存在 styled-components 中!

同样，假设您的目标是在整个应用程序范围内定位字体，可能在一两个标签上使用变体(h2、h2 等)，这允许您在 1 个地方进行所有编辑，我相信最能实现您的目标。

看看 @font-face文档以了解如何声明您的字体样式，以防您不熟悉它。我知道有很多资源可以帮助指导您声明 @font-face(假设您还没有使用 Google 字体之类的东西)。