CSS шрифт "Helvetica Neue"

ProgramBox

CSS шрифт «Helvetica Neue»

Post author:admin
Запись опубликована:27 мая, 2023
Post category:Вопросы по программированию

#css #fonts

#css #шрифты

Вопрос:

Я часто вижу веб-сайты, использующие шрифт «Helvetica Neue». Безопасен ли этот шрифт в использовании, например. Arial? Или у браузеров возникают проблемы с его отображением, или не на многих компьютерах есть этот шрифт? Спасибо.

1. Обратите внимание, iOS 7 и OS X 10.9 теперь включают в «Helvetica Neue» легкий и ультратонкий шрифт, в то время как в «HelveticaNeue-Light», «Helvetica Neue Light» в предыдущей версии эти значения отсутствуют.

2. Хм, интересно: кто еще сократил использование этого шрифта?

3. Интересно, почему это neue а не new для helvetica.

Ответ №1:

Это шрифт по умолчанию на Mac, но редко встречается на ПК. Поскольку технически он небезопасен для работы в Интернете, у некоторых людей он может быть, а у некоторых — нет. Если вы хотите использовать подобный шрифт, не используя @font-face, вы можете написать его несколькими различными способами, потому что он может работать не для всех одинаково.

Мне нравится использовать стек шрифтов, который затрагивает все основы, подобные этому:

 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", 
  Helvetica, Arial, "Lucida Grande", sans-serif;

Этот рекомендуемый стек семейства шрифтов более подробно описан в этом фрагменте CSS-хитростей Better Helvetica, в котором также используется font-weight: 300; .

Ответ №2:

Этот шрифт не является стандартным на всех устройствах. Он устанавливается по умолчанию на некоторых компьютерах Mac, но редко на ПК и мобильных устройствах.

Чтобы использовать этот шрифт на всех устройствах, используйте объявление @font-face в вашем CSS, чтобы ссылаться на него в вашем домене, если вы хотите его использовать.

 @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

Взято из css3.info

Ответ №3:

Helvetica Neue — платный шрифт, поэтому вам не следует придавать этому значения, поскольку вы свободно распространяете шрифт, защищенный авторским правом. Он включен в системы Mac, но не в Windows / linux, так что да, у многих ваших пользователей он не будет установлен. В любом случае, вы можете использовать ‘Arial Narrow’ в качестве замены Windows, которая является эквивалентом Windows.

Ответ №4:

Вы можете использовать http://www.fontsquirrel.com/fontface/generator для кодирования любого шрифта для веб-сайтов. Он сгенерирует код для включения шрифта.

На самом деле я не использую его для шрифтов размером более 30 пикселей. Они выглядят намного лучше как изображения (потому что изображения сглажены, а некоторые браузеры не используют шрифты с сглаживанием псевдонимов в браузере).

Смотрите: http://www.truetype-typography.com/ttalias.htm

Надеюсь, это поможет…

1. Следует упомянуть, что вы можете использовать генератор начертаний шрифтов, только если у вас есть законное право (лицензия) использовать шрифт на веб-сайте через font-face. Helvetica — платный шрифт, поэтому для его использования вам потребуется приобрести лицензию.

2. Еще бы. Fontsquirrel фактически заблокирует обработку Helvetica. Смотрите typekit.com/lists/alternatives-to-helvetica для других опций.

3. Использование изображений больше не является единственным вариантом: css-tricks.com/adding-stroke-to-web-text

4. Этот ответ не соответствовал возрасту. Сглаживание теперь поддерживается большинством браузеров. devhints.io/css-antialias

Ответ №5:

У большинства пользователей Windows на их компьютерах не будет этого шрифта. Кроме того, вы не можете просто отправить его на свой сервер и вызвать с помощью font-face, потому что это не бесплатный шрифт…

И последнее, но не менее важное, отвечая на вопрос, о котором еще никто не упоминал, Helvetica и Helvetica Neue плохо отображаются на экране, если они не имеют действительно большого font-size размера. Вы найдете множество страниц, использующих этот шрифт, и на всех них вы увидите, что верхняя граница строки текста выглядит волнистой, а некоторые буквы выглядят выше других. На мой взгляд, это основная причина, по которой вам не следует его использовать. Для вас есть другие варианты использования, например Open Sans.