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

Question

通常在我的代码中,我使用的一些变体很少有不同的字体,例如:

• Arial,font-weight:400,font-style:normal
• Arial,font-weight:400,font-style:italic
• Arial,font-weight:700,font-style:normal
• Helvetica,font-weight:400,font-style:normal
• Helvetica,font-weight:400,font-style:italic

我正在使用CSS-IN-JS库styled-components,所以不使用一些styles.css.有时候,设计师到我这里来,问一次改变Arial,以Comic Sans用于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计算

优点:

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

第二种方法

使用相同的技术,但不是在类的形式中使用基本相同的定义定义styled-components使用全局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

• 添加classNames到JSX

优点:

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

• 与变体1相同的好处

第三种方法

我在本文中看到了使用字体权重的WebType最佳实践,以及我正在下载的web字体包的示例中,每个组合[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我们定义字体(我在所有变体中都使用它),从而消除了using two formats CSS-in-JS and styles.css第二种方法的问题

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

Answer 1

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

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

参考第3种方式，我们可以进行组合[font-family, font-style, font-weight]。组件的行为取决于作为 props 传递给它的组合。

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

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

... // other combinations

它可以用作<General theme={arialNoraml300} />或<General theme={helveticaOblique900} />

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

希望对您有帮助。