Обычно в моем коде есть несколько разных шрифтов, которые я использую с некоторыми вариантами вроде:
- 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 браузером
Плюсы:
- У меня будет 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
-
Добавление
classNames
в JSX
Плюсы:
-
В отличие от варианта 1 не потребуются ресурсы для дополнительной компиляции JSX
-
То же преимущество, что и в варианте 1
Третий подход
Я вижу в этой статье WebType Лучшие практики использования шрифтов-весов, а также в примерах для пакетов веб-шрифтов, которые я загружаю, каждая комбинация [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