Как такое верстают?

Question

[gto6120]

Добрый день. Увидел урок по работе с Adobe Muse (сам продукт не обсуждается), стало интересно, а как такое потом верстают? Там в шапке сайта использовано 6-7 разных шрифтов, неужели все их придется задействовать в проекте??? Если картинкой то будет убого, при малых разрешениях скрыть эти надписи будет желание, т.к. они станут маленькими и съедутся под иллюстрацию с девушкой. Короче нежизнеспособный какой-то пример получается... Или есть какие-то техники другие? Как вариант вижу отдельный слой с надписями, который на нужном брэйкпоинте скрывается, но тут будут накладные расходы на загрузку этого дополнительного изображения.

Вот сам ролик https://youtu.be/sNWeABGOGxI

Answer 1

[dom1n1k]

Если надписи сугубо декоративные, то тянуть 6-7 полных шрифтов, конечно же, нет смысла.

1. Можно выкусить из шрифтов по небольшому субсету буквально в те несколько символов, которые составляют надпись. Весить этакой обрезанный шрифт будет единицы килобайт. Далее кодируем в base64 и все легко грузится.
2. Можно сделать SVG-картинкой.
3. Можно растровой картинкой, дав запас по разрешению в 2-3 раза на любые ретины и масштабирования. Если в надписи мало цветов, весить это будет немного.

Лично я за последний вариант.

Answer 2

[Сергей Горячев]

Верстается такое одной картинкой - шрифты в смысле. Тетка с фоном отдельно.

Если присмотреться, там же на видео специально выделена область 320 пикселей.
Для корректного отображения на мобильниках.

На больших экранах показывать шрифты, после 1000 пикселей например убивать.

Answer 3

[Kote]

svg. До упора уменьшать, дальше скрывать.

Answer 4

[GreatRash]

Offtop: дизайн отвратителен.