React Frontend Developer

Question 1

Как интегрировать веб-шрифты (например, Google Fonts) в HTML и какие факторы влияют на производительность загрузки?

Accepted Answer

Веб-шрифты, такие как Google Fonts, можно подключить через элемент в разделе HTML или использовать CSS @import. Однако шрифты могут замедлять рендеринг страницы, поэтому важно оптимизировать их загрузку. Основные факторы, влияющие на производительность, включают количество стилей шрифтов, их формат и стратегию загрузки (например, font-display: swap, чтобы избежать блокировки рендеринга текста).

Question 2

Почему стоит использовать семантические переменные (например, font-heading-h1), а не задавать стили напрямую для тегов h1/h2 в глобальном CSS?

Accepted Answer

Семантические переменные отделяют смысл от конкретного значения, упрощая поддержку и переопределение стилей. Вместо привязки к тегу h1 вы используете переменную, которую можно переопределить в любом контексте. Это делает код гибче, уменьшает дублирование и облегчает создание тем.

Question 3

Откуда браузер берёт дефолтное значение font-size для REM и где можно его переопределить?

Accepted Answer

Браузер берёт дефолтное значение font-size для REM из корневого элемента , обычно это 16px. Переопределить его можно, задав свойство font-size для селектора html в CSS. Это влияет на все REM-значения на странице.

Question 4

От чего зависит единица EM — от ближайшего REM или от родительского font-size?

Accepted Answer

Единица em зависит от font-size родительского элемента, а не от rem. Если у родителя font-size 20px, то 1em у дочернего элемента будет равен 20px. Если у родителя не задан font-size, em берётся от ближайшего предка с заданным размером шрифта, иначе от браузерного значения по умолчанию (обычно 16px).

Вопросы React Frontend Developer