React中处理字体定义的可扩展方式。js应用程序

Question

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

• Arial，字体权重：400，字体样式：正常
• Arial，字体权重：400，字体样式：斜体字
• Arial，字体权重：700，字体样式：正常
• Helvetica，字体重量：400，字体样式：正常
• Helvetica，字体重量：400，字体样式：斜体字

为此我使用了CSS-IN-JS库< code>styled-components，所以没有使用一些< code>styles.css。有时设计师来找我，要求将< code >字体样式:斜体的< code>Arial改为< code > Comic Sans ；和< code > font-weight:400；

这不能通过跨项目代码库的简单替换来编码，因为这种字体还有其他变体。

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

问题：

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

方法：

第一种方法

我考虑过将这些文本定义提取到单独的< code>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>
...

这样做的缺点是：

> < li>

额外JSX标签

通过浏览器重新渲染这些额外的组件以及CSS计算可能会有一些计算成本

优点:

• 我将有1个地方来管理任何给定[ftt-group， ftt-type， ftt-的所有出现]组合

第二种方法

使用相同的技术，但是不要定义< code >样式化组件,而是以类的形式使用具有基本相同定义的全局< code>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 和样式.css

向 JSX 添加类名

优点:

>

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

与变型1相同的优势

第三种办法

我在本文中看到了使用字体权重的WebType最佳实践，并且在我正在下载的Web字体包的示例中，[font-family，font-style，font-weight]的每个组合都被定义为单独的字体，例如，就像在提到的资源中的此示例中一样（假设这些都是字体样式：正常;）：

{ 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）

优点:

>

除了＜code＞字体之外，我们不再使用任何其他字体。css＜/code＞在这里我们定义字体（我在所有变体中都使用它），从而消除了在JS和样式中使用两种格式css的＜code＞。第二种方法的css问题

可以在JS-in-CSS中使用，因为我现在正在使用它，代码库范围的替换将只更改那些字体（我正在尝试实现的），因此与变体1中的好处相同

Answer 1

你可以选择使用带有主题支持的道具。您可以通过props传递所需的值，否则使用默认值。< br >这是样品，

const General = styled.span`
  ... // other properties
  font-family: ${ props => props.theme.fontFamily };
  font-style: ${ props => props.theme.fontStyle };  
  font-weight: ${ props => props.theme.fontWeight };
`

参考第三种方法，我们可以组合[字体系列，字体样式，字体粗细]。组件行为取决于作为道具传递给它的组合。

let arialNoraml300 = { 
  fontFamily: Arial,
  fontStyle: normal,
  fontWeight: 300
};

let helveticaOblique900 = { 
  fontFamily: Helvetica, 
  fontStyle: oblique, 
  fontWeight: 900 
}

... // other combinations

它可以用作＜code＞

如果我们要求任何更改，我们需要替换传递给组件的组合。

希望对你有帮助。

Answer 2

我不完全同意上述的利弊。其中大多数与CSS和CSS-IN-JS有关。在样式化组件中使用CSS是非常好的。我的经验法则是将CSS用于泛型类，将样式组件用于主题化和变量。Rest使用你觉得不那么尴尬和容易维护的东西。

来到您维护字体和字体权重更改的特定问题。

我也遇到过类似的问题。

具有主题支持、设计迭代甚至黑客马拉松的平台。

你通常会发现自己在顶层用同样的设计语言来改变这些。也就是说，在应用程序中完全改变你的主要字体和粗细。

所以，让你的字体用@ftt-face定义，主要，次要，第三等，而不是特定的字体名称，因为你必须改变定义，而不是到处的类名。

   @font-face {
     font-family: "primary-default";
     font-weight:  regular
     src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
          url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
   }

如果您必须更改primary-default以获得不同的字体系列和字体粗细，您可以相应地修改这些定义。

如果只是特定的更改或快速覆盖，那么使用辅助类

 .primary-fontStyle {
   font-family: "primary-default";
   font-weight:  regular
 }

Answer 3

我认为您需要回答的最重要的事情是字体变体将在您的应用程序中发生的位置。它们是全球性的吗？您是否只需要某些标签（即 h1、h2 等）使用它们？您是否需要特定于少数组件的特定覆盖？

根据我的经验，通常每个应用程序只声明 1 或 2 种字体，这些字体通常倾向于应用程序范围。我很少看到这些字体非常具体地使用（即具有特定类或 ID 的 1 或 2 个元素），而是倾向于放在正文上。

第一种方法

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

第二种方法

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

第三种办法

在我看来，这是解决您的需求的最接近的方法，尽管看起来您确实希望尽可能地将所有东西都放在样式化的组件中。既然如此，我会稍微调整一下这种方法。

替代方法

我相信@ftt-face方法与样式组件的injectGlobalAPI配对会让您获得最多的里程（他们甚至在文档中提到了@ftt-face！）

换出fort-的家庭意味着更新你的@fort-的家庭定义和更新你的fort-的家庭声明都在一次完成。更好的是，你可以避免. css文件，并将所有内容都保留在样式组件中！

同样，假设你的目标是在整个应用程序范围内使用字体，在一个或两个标签上可能有一个变体(< code>h2，< code>h2，等等)，这允许你在一个地方进行所有的编辑，我相信best实现了你的目标。

查看 @font 面文档，了解声明字体样式的感觉，以防您不熟悉它。我知道有很多资源可以帮助指导你声明@font面孔（假设你还没有使用像谷歌字体这样的东西）。