Как правильно сверстать логотип?

Question

[mydarck]

Есть логотип:

Обычно я бы поделил данный элемент на две части:

1. Изображение логотипа;
   
2. Текстовая часть.
   

Изображению добавил атрибут alt, обернул бы все в ссылку с атрибутом title и вроде бы все прекрасно, но...
Но в данном примере используется редкий шрифт Days и загвоздка в том, что:

1. Этот шрифт используется только в логотипе. Из-за двух слов подключать целый шрифт, хоть он и весит 65 кб не хотелось бы.
   
2. Шриф редкий и я нашел его только с расширением .ttf, а значит, что данное решение не кросплатформенное.
   

Есть еще вариант сделать картинкой. Но при достижении разрешения экрана меньше 768 px нужно убрать ту часть где текст оставив только картинку эмблемы, а значит нужно будет скрыть полноразмерную картинку и сделать видимой маленькую. Тем самым мы оставляем 7,62 кбайтную картинку для загрузки, но при этом ее не используем. Что тоже не хорошо. Как бы поступили Вы?

Comments

[Ankhena]

1. Лучше в SVG
2. Если все таки шрифт, то шрифт из ttf прекрасно конвертируется в полный набор https://web-font-generator.com/
3.

Шриф редкий и я нашел его только с расширением .ttf

Шрифты предоставляет дизайнер или заказчик. Это разумно.

Answer 1

[dom1n1k]

Это называется "горе от ума", типичнейший случай. Верстать логотип? У меня цензурных слов не хватит, чтобы описать бессмысленность этого занятия. Делай либо 2 переключаемые растровые картинки, либо одну в SVG.

Comments

[mydarck]

Зачем так много писать? Выходит 1/4 предложений только по существу. Но спс.

[Mr Crabbz]

mydarck: Что он такого страшного написал? Всё по делу на 100%.

[mydarck]

Роман Краббз: Если вы для себя почерпнули что-то важное из первых трех предложений, это хорошо. Лично я понял суть, которую хотел донести dom1n1k, из последнего предложения: "Делай либо 2 переключаемые растровые картинки, либо одну в SVG.". Представьте, что вы задаете вопрос, а вам в ответ: "Это называется "горе от ума", типичнейший случай. ...какой то вопрос, в зависимости от того, что вы спрашиваете... У меня цензурных слов не хватит, чтобы описать бессмысленность этого занятия." Информативно? Вам бы хватило этого для решения или прояснения задачи? Если да, то хорошо. Мне нет.

[Атланта]

Я понимаю, что ваш ответ был более трех лет назад, но если Вы ещё заходите на Toster, подскажите мне пожалуйста, как именно сделать "2 переключаемые растровые картинки"? Что Вы имели ввиду?

[mydarck]

Атланта, на разных разрешениях экрана должны быть разные логотипы. Для этого подготавливается две картинки в формате .png. Одна с текстом, т.е. полноценный логотип. Он используется на десктопах. И второй логотип упрощенный для мобильных устройств.

[Атланта]

mydarck, ок, спасибо)
Я понимаю суть, но не знаю, как это реализовывается. единственный вариант, как я могла бы это сделать это через background в медиа запросах
Есть какой-то другой выход?

[mydarck]

Вы думаете в правильном направлении. Это должно делаться через медиа запросы. Можно, конечно, это сделать с помощью JS. Можно но не нужно.

Answer 2

[Astrohas]

юзайте SVG

Answer 3

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

Шриф редкий и я нашел его только с расширением .ttf, а значит, что данное решение не кросплатформенное.

А что, fontsquirrel закрыли?)
Или на горе font2web )))

Comments

[mydarck]

Я не знаю закрыли или нет. А вам зачем эта информация?

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

mydarck: Да так я, случайно написал. Нормальные верстальщики не нуждаются в подсказке, как из ttf сделать любой другой формат шрифта. Но вы не обращайте внимания, вам это не надо.

[mydarck]

Сергей Горячев: Тогда зачем вы тут зарегистрированы хочу узнать? Я так понимаю Вы в отличии от меня в подсказках ведь не нуждаетесь. Или я ошибаюсь?

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

mydarck: Слушай, друг по несчастью, нуждающийся в подсказках. Я тебе скинул 2 сервиса, которые могут переделать твой ttf в любой web шрифт, а ты мне выносишь мозг. Любитель позаниматься болтологией? К сожалению, компанию тебе не составлю. Всего хорошего.

[mydarck]

Сергей Горячев: Можно подсказать, а можно подсказать с вы*боном. Кому-то кажется, что это одинаковые вещи, но мне нет. Спасибо вам Сергей Грачевский за помощь и всего доброго.