Как сделать текст не жирным css

Как убрать жирность текста?

Как убрать тень текста
Добрый день. Переделываю сайт, и не могу разобраться в css. Там где то прописано чтоб буквы.

Как убрать отступ (строчный) текста от поля формы?
Здравствуйте помогите устранить один нюанс, как убрать отступ текста от поля формы? на рисунку.

фотошоповская жирность Bold Condenset Italic
Можно ли как нибудь повторить визуально нестандартные шрифты из фотошопа в html, которым дана.

Скажем «нет» ложному жирному

Браузеры могут вытворять ужасные вещи с текстом. Если текст стилизован как жирный или курсив, но в данном шрифте отсутствует жирное или курсивное начертание, то браузеры компенсируют их отсутствие, пытаясь создать подобное начертание самостоятельно. В результате мы наблюдаем неуклюжую попытку подражания настоящему шрифтовому дизайну. В этой статье вы узнаете несколько путей избежать подобной проблемы.

Вы не можете винить браузер за то, что он пытается компенсировать отсутствие нужного начертания. Если текст должен быть жирным или курсивным, но в шрифте нет необходимых данных для этого браузер должен сделать хоть что-то. Таким образом жирный выглядит как утолщенная версия обычных глифов, а чтобы получить курсив браузер просто наклоняет буквы. То что увидит конечный пользователь будет выглядеть лучше или хуже в зависимости от браузера, который он использует и шрифта который используете вы. Некоторые браузеры, такие как Firefox, делают более жирные мазки у жирного текста, делая месиво из текста на экране. Другие браузеры, такие как Chrome, лишь чуть-чуть утолщают мазки, в итоге иногда невозможно отличить жирный текст от нормального. Ни одно из этих ложных начертаний даже близко не похоже на то, что выдает настоящий шрифт.

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

Заголовки и единое начертание отображаемых шрифтов

Представим, что вам захотелось использовать некий броский шрифт для ваших заголовков. Возможно вам приглянется шрифт Diplomata, который можно найти на сайте Google Web Fonts. Следуя инструкциям ниже вы можете подключить его для ваших элементов h1:

Что даст подобный результат в Firefox:

Рис. 1: Diplomata в ложном жирном начертании

Dipomata содержит только одно начертание, поэтому правило @font-face , код которого вы получаете, содержит настройку font-face: normal; . Однако, так как в заголовки обычно по умолчанию имеют font-weight: bold; браузер размазывает глифы в попытке эмулировать жирное начертание. В предпросмотре шрифта вы могли видеть элегантные полосы в штрихах букв и он уже имел честное жирное начертание. Ложный жирный, созданный браузером, почти уничтожил подобные детали.

Вы можете исправить подобное поведение Diplomata, добавив font-weight: normal; для h1 . Но это будет не слишком хорошим решением в случае когда шрифт недоступен и вам нужно деградировать в дефолтному списку шрифтов. Лучшим решением будет добавление еще одного правила @font-face для шрифтов с единым начертанием, показывающего, что данный шрифт может использоваться как для нормального текста, так и для жирного. Таким образом вы получите нормальное начертание вашего шрифта в заголовках и жирное, в случае его отсутствия и замены стандартным шрифтом.

Если вы перейдете по ссылке на шрифт Diplomata, используя браузер Internet Explorer, то увидите кроссбраузерный код @font-face , предоставленный Google. Вы можете скопировать этот код себе, изменив свойство font-weight на bold .

Это сохранит дизайн выбранного шрифта:

Рис. 2: Diplomata без ложного жирного начертания

Так как Diplomata сам по себе жирный, он подходит для заголовков в нормальном начертании. Если вместо него будет использован другой шрифт из списка, заголовки все равно останутся жирными. Трюк с дублированием @font-face сработает и с другими шрифтовыми сервисами. В своем примере, я продублировал правило, которое использует Google, но если вы сами составляете ваше правило, то, возможно, вы захотите проверить @font-face , предложенный такими сервисами как FontSpring, Font Squirrel или Paul Irish. Если на вашем сайте используется шрифт с единым начертанием, то вы можете избежать проблемы ложного жирного путем добавления дополнительного правила @font-face .

Учтите, что спецификация CSS3-Fonts определяет свойство font-synthesis , при помощи которого можно контролировать нужно ли использовать ложный жирный или ложный курсив, используя одно правило @font-face . Но, в настоящее время, ни один браузер не реализовал поддержку этого свойства. Дублирование правил @font-face — единственный способ контролировать подобное поведение в браузерах.

Не обманитесь, отсутствием жирного или курсива

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

К примеру возьмём шрифт Lora, предоставляемый Google Web Fonts. Если вы последуете дефолтным рекомендациям по внедрению шрифта, то вы получите только одно начертание, что даст вам следующие результаты в браузере Chrome для текста, заключенного в <strong> и <cite>

Рис. 3: Lora в ложном жирном и ложном курсивном начертании

На первый взгляд это выглядит не так плохо как слово «Yikes!», использованное выше, но вы можете заметить что жирный текст не такой уж и жирный, а курсив выглядит совсем не как закругленные элегантные глифы на странице с примерами начертаний Lora. Ваш текст может включать стилизацию жирным или курсивом, явную или неявную, но в случае отсутствия подобных начертаний в дело вступит браузер. А вот что вы хотели бы получить на самом деле:

Рис. 4: Настоящее жирное и курсивное начертание шрифта Lora

Интерфейс Google Fonts предупреждает пользователя не включать слишком много стилей. Вот дефолные настройки для шрифта Lora где стрелка указывает на желтое поле, показывая, что все в порядке.

Рис. 5: Шрифтовой веб-интерфейс с дефолтными настройками

Если вам случится выяснить, что вы получаете на выходе совсем не то, что вы видели на странице с примерами, вы можете решить подключить дополнительные стили, стрелка при этом переползет на красное поле.

Рис. 6: Шрифтовой веб-интерфейс со страшной красной шкалой

Если вы не уверены в необходимости дополнительных стилей, шкала может ввести вас в заблуждение: вы можете подумать, что вы делаете что-то не то, подключая их! Что, фактически, побуждает вас полагаться на размытые и скошенные тексты вместо реальных стилей, предоставляемых шрифтом.

Я не предлагаю вам полагаться только на сервис Google Web Fonts. Но, по крайней мере, если вы отметите там нужные галки для жирного и курсивного начертания этот сервис предложит вам корректно сформированное правило @font-face . Некоторые другие шрифтовые веб-сервисы предлагают отдельное правило @font-face для каждого из начертаний шрифта в семействе, каждое правило настроено на font-weight: normal; . Это может стать причиной всех тех проблем, которые я описал в статье, несмотря на то, что жирное и курсивное начертание присутствует в шрифте.

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

Как сделать текст толще в html

CSS свойство font-weight позволяет указать, насколько жирным будут выглядеть текст. Как вы знаете, жирный текст выглядит темнее и немного толще, чем обычный. Вы можете использовать жирный текст для любого тега, задав свойству значение bold .

Если у вас есть элемент, для которого по умолчанию задан жирный шрифт, или он наследует такой шрифт от родительского элемента, то можно уменьшить насыщенность шрифта с помощью значения normal .

Для свойства font-weight предусмотрены также два относительных значения: bolder и lighter . Они сделают текст более или менее плотным по сравнению с унаследованным значением. Эти значения используются редко, так как немногие шрифты поддерживают столь слабые различия в плотности.

Вы также можете устанавливать значения свойства с помощью чисел от 100 до 900, но это тоже не очень хорошо поддерживается шрифтами и браузерами и редко применяется.

Свойство CSS font-weight

Свойство font-weight в CSS устанавливает начертание (еще говорят толщину или насыщенность) шрифта и зависит от доступных вариантов в семействе шрифтов, а также от вариантов, определенных браузером.

Например, чтобы сделать жирный шрифт, нужно задать свойство:

Значения

Свойство font-weight принимает либо значения в виде ключевых слов, либо числа в диапазоне от 100 до 900.

Доступные ключевые значения:

normal обычный, соответствует числу 400 bold жирный текст, соответствует числу 700 bolder более жирный относительно начертания родителя lighter более тонкий относительно родителя

Также есть 2 вспомогательных значения:

  • inherit &#8211; указывает наследование показателя от родителя;
  • initial &#8211; установка в значение по умолчанию.

Чтобы установленное начертание отобразилось на сайте, необходимо, чтобы шрифт его поддерживал. Как правило, большинство шрифтов поддерживают только часть значений.

Если шрифт имеет жирное («700») или нормально («400») начертание как часть семейства, браузер будет использовать их. Если они недоступны, браузер смоделирует собственные жирную или нормальную версию. Но он не будет моделировать другие недоступные варианты жирности.

Иногда можно встретить термин полужирное начертание или semibold, но такого предустановленного значения в CSS нет, это соответствует жирности 600 .

Следующая демонстрация показывает использование различных вариантов жирности для текста:

В приведенной выше демонстрации используется шрифт Open Sans, встроенный с помощью Google Fonts API. Загружаются все доступные варианты жирности. Недоступные варианты просто отображают ближайшим вариантом.

Обычные шрифты, такие как Arial, Helvetica, Georgia и т. д. не имеют начертаний, отличных от 400 и 700. Таким образом, в той же демонстрации с применением одного из этих шрифтов, в девяти абзацах будет отображаться только два варианта жирности.

Использование bolder и lighter

Толщина шрифта bolder и lighter (жирнее и тоньше) вычисляется относительно родительского элемента. Браузер будет искать ближайший «более жирный» или «легкий» вес, в зависимости от того, что доступно в семействе шрифта, в противном случае он просто выберет «400» или «700», в зависимости от того, что логичнее.

Дочерние элементы не будут наследовать bolder и lighter, а вместо этого унаследуют вычисленный вес.

Что происходит при недоступности заданного значения

Если заданное числовое значение веса недоступно, для определения жирности применяется такой подход:

  1. Если задано число больше 500 , будет использовано первое доступное более жирное начертание (если такого нет, то первое доступное более светлое).
  2. Если задано значение меньше 400 , будет использовано первое доступное более светлое начертание (если такого нет, то первое доступное более жирное).
  3. Если задано 400 , будет применено 500 . Если 500 недоступно, будет использован подход из предыдущего пункта.
  4. Если задано 500 , будет применено 400 . Если 400 недоступно, то будет использован алгоритм для пункта 2.

Это значит, что для шрифтов , у которые есть только начертания normal и bold , значения 100-500 становятся normal , а 600-900 &#8211; bold .

font-weight

Устанавливает насыщенность шрифта. Значение указывается в виде чисел от 100 до 900 с шагом 100 или с помощью заданных ключевых слов.

Краткая информация

Значение по умолчанию normal
Наследуется Да
Применяется Ко всем элементам
Анимируется Да

Синтаксис

Обозначения

Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз. <радиус>
# Повторять один или больше раз через запятую. <время>#

Значения

Насыщенность шрифта задаётся с помощью ключевых слов: bold &#8212; жирное начертание и normal &#8212; нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.

Вот как числовые значения влияют на насыщенность шрифта.

  • 100 — тонкое начертание;
  • 200 — сверхсветлое;
  • 300 — светлое;
  • 400 — нормальное (аналогично normal );
  • 500 — среднее;
  • 600 — полужирное;
  • 700 — жирное (аналогично bold );
  • 800 — сверхжирное;
  • 900 — тяжёлое.

Учтите, что не все шрифты поддерживают этот набор. Если указанное значение не поддерживается, то браузер приведёт шрифт к ближайшей насыщенности. К примеру, если вы указали 900 и оно не может быть показано, то браузер в действительности применит значение 700 как ближайшее, которое работает корректно.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *