小编Ang*_*gel的帖子

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

• 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,例如: …