Содержание

Как установить шрифт ‘semi-bold’ через CSS? Вес шрифта 600 не делает его похожим на полужирный шрифт, который я вижу в своем файле Photoshop



Я делаю преобразование Photoshop в XHTML, и дизайнер сайта использовал полужирный шрифт Myriad Pro, который хорошо смотрится в файле photoshop, но когда я пробую полужирный вариант в CSS, он выглядит довольно похоже на обычный полужирный шрифт, который слишком полужирен для моей цели. Есть ли способ добиться более красивого полужирного шрифта в HTML и CSS или я просто застрял с » font-weight: 600;»?

css fonts
Поделиться Источник Simon Suh     05 января 2012 в 00:00

6 ответов


  • Как установить другой шрифт-вес шрифта?

    Я столкнулся с проблемой с пользовательским шрифтом, который я использую для своего сайта. Поэтому я использую следующий CSS для текста. font-family: Open Sans,Helvetica,Arial; font-weight:600; Поскольку сайт построен на моем родном языке, я должен использовать символы UTF-8, которые, похоже, не.

    ..

  • Измените шрифт заголовка TabBarItem на полужирный в Swift для iOS

    Я пытаюсь установить вес шрифта выбранного элемента панели вкладок на полужирный шрифт. Вроде как это не имеет никакого эффекта. Любая идея, что не так. forState: .Normal работает, как и ожидалось, forState: .Selected не имеет никакого эффекта. let tabBarItem0 = tabBar.items![0] as! UITabBarItem…



67

В CSS для свойства font-weight значение: normal

по умолчанию равно числовому значению 400, а bold -700.

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

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

font-weight: 600;

Здесь JSFiddle использует семейство шрифтов ‘Open Sans’, загруженных с вышеуказанными весами.

Поделиться Jesús Carrera     05 мая 2014 в 17:35



43

Практический способ-установить font-family в значение, которое является конкретным именем полуболдовой версии, например

font-family: "Myriad pro Semibold"

если, конечно, это имя. (Лично я использую свой собственный инструмент листинга шрифтов, который работает на Internet Explorer только для того, чтобы увидеть шрифты в моей системе по именам, которые можно использовать в CSS.)

При таком подходе font-weight не требуется (и, вероятно, лучше не устанавливать).

Веб-браузеры плохо реализуют вес шрифта по книге: они в основном не могут найти версию с определенным весом, кроме жирного. Обходной путь состоит в том, чтобы включить информацию в семейство шрифтов, даже если это не то, как все должно работать.

Тестируя с Segoe UI, который часто существует в разных версиях веса шрифта на системах Windows, я смог заставить Internet Explorer 9 выбрать правильную версию при использовании логического подхода (использование имени семейства шрифтов Segoe UI и различных значений font-weight ), но это не удалось на Firefox 9 и Chrome 16 (только нормальная и жирная работа). Во всех этих браузерах, например, установка font-family: Segoe UI Light работает OK.

Поделиться Jukka K. Korpela     05 января 2012 в 00:22



36

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

text-shadow : 0 0 0 #your-font-color;

Поделиться Raj     14 декабря 2013 в 01:47


  • Кросс-вопрос, шрифт полужирный браузер

    Я использую шрифт Signika для своего веб-приложения. Дизайн представлен в файлах Adobe Illustrator, где они использовали шрифт Signika Semibold . Первый способ : Я применил font-family: Signika Semibold но он работает как полужирный шрифт только в браузере Chrome . Firefox и IE отображают текст в.

    ..

  • Используйте следующий шрифт, если указанный вес шрифта недоступен

    Я пытаюсь решить проблему со шрифтами. Мы купили шрифт Helvetica Light и связали его через font face. В CSS году мы имеем font-family: ‘Helvetica’, ‘Arial’, sans-serif; . Теперь, когда у кого-то нет шрифта Helvetica, установленного на компьютере (в основном у пользователей Windows), они могут…



2

семейство шрифтов: ‘Open Sans’; вес шрифта: 600; важно перейти на другое семейство шрифтов

Поделиться Martian2049     31 августа 2016 в 02:45



1

К середине 2016 года Chromium engine (v53) поддерживает всего 3 стиля акцента:

Обычный текст, жирный и супер-жирный…

 <div>Testing</div>

 <div>Testing</div>

 <div>Testing</div>

Поделиться SomeUser     23 сентября 2016 в 12:30



0

Семейства шрифтов состоят из нескольких различных шрифтов

Например, экстра-жирный шрифт будет выглядеть совсем по-другому, скажем, в Photoshop, потому что вы выбираете другой шрифт . То же самое относится и к курсивному шрифту, который действительно может выглядеть совсем по-другому. Установка font-weight:800 или font-style:italic может привести к тому, что веб-браузер просто приложит все усилия, чтобы откормить или наклонить нормальный шрифт в семействе .

Даже если вы загружаете семейство шрифтов, вы должны

указать вес и стили, необходимые для некоторых веб-браузеров, чтобы вы могли выбрать другой шрифт в семействе с font-weight и font-style .

Пример

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

<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Open+Sans:100,400,400i,600,800">
    <style>
      body {
        font-family: 'Open Sans', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>    
    <div>Didn't work with all the fonts</div>
   <div>Didn't work with all the fonts</div>
   <div>Didn't work with all the fonts</div>
  </body>
</html>

Ссылка

(Предупреждение Quora, пожалуйста, удалите, если это не разрешено. )

https://www.quora.com/How-do-I-make-Open-Sans-extra-bold-once-imported-from-Google-Fonts

Тестирование

Тестировалась работа в Firefox 66.0.3 на Mac и Firefox 36.0.1 в Windows.

Другие шрифты должны быть загружены на сервер, стиль и вес указаны их индивидуальными именами.

Ничего не предполагайте, с точки зрения шрифта, о том, какое устройство посещает ваш сайт или какие шрифты установлены на его OS.

(Вы можете использовать резервные копии serif и sans-serif, но вы получите шрифт, сопоставленный с ними отдельной используемой версией веб-браузера, в пределах шрифтов, доступных в версии OS, под которой он работает, а не в том, что вы разработали.)

Тестирование следует проводить с временно удаленным шрифтом из вашей системы, чтобы убедиться, что ваш дизайн действует.

Поделиться Henrik Erlandsson     24 апреля 2019 в 13:35


Похожие вопросы:


Как показать тот же шрифт, который в photoshop на моей веб-странице?

У меня есть текст в photoshop со шрифтом: Arial 17 pt regular strong как я могу написать его в css, чтобы показать то же самое? Мои 2 проблемы: 1 — единица pt в photoshop, что это такое в css?. ..


Как установить жирный шрифт на этикетке, не нарушая размер шрифта и фамилии?

Я хочу, чтобы выбранная метка выглядела полужирной без реализации версии семейства шрифтов-полужирной. Пример: — по умолчанию полужирный шрифт используется следующим образом UIFont *myFont = [UIFont…


Можем ли мы установить вес шрифта NSFont или стиль шрифта непосредственно, а не изменять имя шрифта?

Вопрос впереди : Можем ли мы напрямую получить доступ к информации о весе шрифта и стиле шрифта для приписываемой строки? Или мы можем создать новую строку, для которой мы можем установить эту…


Как установить другой шрифт-вес шрифта?

Я столкнулся с проблемой с пользовательским шрифтом, который я использую для своего сайта. Поэтому я использую следующий CSS для текста. font-family: Open Sans,Helvetica,Arial; font-weight:600;…


Измените шрифт заголовка TabBarItem на полужирный в Swift для iOS

Я пытаюсь установить вес шрифта выбранного элемента панели вкладок на полужирный шрифт. Вроде как это не имеет никакого эффекта. Любая идея, что не так. forState: .Normal работает, как и ожидалось,…


Кросс-вопрос, шрифт полужирный браузер

Я использую шрифт Signika для своего веб-приложения. Дизайн представлен в файлах Adobe Illustrator, где они использовали шрифт Signika Semibold . Первый способ : Я применил font-family: Signika…


Используйте следующий шрифт, если указанный вес шрифта недоступен

Я пытаюсь решить проблему со шрифтами. Мы купили шрифт Helvetica Light и связали его через font face. В CSS году мы имеем font-family: ‘Helvetica’, ‘Arial’, sans-serif; . Теперь, когда у кого-то нет…


Не удается установить вес шрифта

У меня есть два шрифта: font: normal 12px/18px Arial, Helvetica, sans-serif; font: normal 15px/20px Georgia, Times New Roman, Times, serif; Мне нужно установить вес шрифта для этих шрифтов со…


HTML email: шрифт-вес полужирный в Outlook не работает

ОБНОВЛЕНИЕ. Я перепробовал все предложения. Но все равно не могу заставить Outlook отображаться жирным шрифтом! UPDATE 2. См. мое решение ниже Я создаю информационный бюллетень HTML email….


Черный шрифт на самом деле не является «черным»

Я создаю свой первый сайт и хотел бы использовать Monserrat Black. Когда я печатаю классический font-weight: 900; in my CSS file, результат явно смелее, чем regular, но не так жирно, как должно…

Font-weight: bolder для шрифтов со множеством начертаний

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

Ведь не очень красиво, когда в ультратонком шрифте появляются жирные кляксы тегов strong.

Возьмём для примера Open Sans.

Open Sans имеет пять начертаний: Light 300, Normal 400, Semi-Bold 600, Bold 700 и Extra-Bold 800.
Цифры соответствуют значению font-weight.

Основной текст имеет начертание Light 300, заголовки и цитаты — Normal 400, а промо-блок — Semi-Bold 600:

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}
h2, h3, h4, h5, h5, h6,
blockquote {
  font-weight: 400;
}
.promo {
  font-weight: 600;
}

Тег strong может встечаться и в основном тексте, и в цитатах, и промо-блоке. Надо это учесть.

По-умолчанию:

strong, b {
    font-weight: bold; 
}

А нам хочется, чтобы у strong и b для основного текста было Normal 400, для цитат и заголовков — Bold 700, а для промо блока — Extra-Bold 800. Это сохранит контраст между жирным и нежирным текстом примерно равным во всех случаях.

Уверен, многие пробовали использовать strong {font-weight: bolder;}, но это не принесло ожидаемого результата — текст стал ещё жирнее, чем ожидалось.

А всё потому, что согласно спецификации, значение bolder (lighter) увеличивает (уменьшает) унаследованное значение font-weight до следующего возможного для данного шрифта значения, согласно следующей таблице.

Наследуемое значениеbolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700

Значения «bolder» и «lighter» в зависимости от наследуемого значения.

Но в браузерной CSS прописано strong, b {font-weight:bold;}, т.е. унаследуется значение «700», а потом оно ещё и увеличивается до «900». Поэтому кажется, что bolder работает неправильно.

Добавлено 22 января 2016

На самом деле это был баг и он присутствовал во всех браузерах на момент написания статьи. Позже баги в браузерах были исправлены. А мой пулл-реквест был принят в normalize.css.

Исправить это можно так:


strong, b {
  font-weight: inherit;
}


strong, b {
  font-weight: bolder;
}

Именно так, как два отдельных правила. Первое обнуляет значение font-weight из браузерной таблицы стилей, второе задаёт жирность уже в относительных, а не абсолютных единицах.

Теперь нам не придётся заботиться о вложенности элементов — каскад всё сделает автоматически. Мы можем вкладывать теги strong друг в друга.

Вложенные теги «strong». Толщина шрифта определяется исходя из значения родительского элемента.

Демка

Ограничения

Используя относительные значения font-weight мы получаем только по три градации жирности шрифта для bolder и lighter соответственно. Спецификация не гарантирует, что браузеры правильно сопоставят названия начертаний и числовые значения. Не гарантирует, что для шрифта найдётся более жирное или более тонкое начертание. У некоторых шрифтов всего два начертания, у некоторых может быть восемь.

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

Чтобы более тонко настроить вес шрифта, надо использовать абсолютные значения.

Баги

Если у вас шрифт установлен в системе, но не подключен через @font-face, то Google Chrome определяет только Normal и Bold начертания шрифта. Чтобы локальный шрифт заработал, нужно дополнительно указать его font-family.

.fw300 {
  font-family: "Open Sans Light", "Open Sans";
  font-weight: 300;
}
.fw600 {
  font-family: "Open Sans SemiBold", "Open Sans";
  font-weight: 600;
}

Source Sans Pro Semibold шрифт

Source Sans Pro семейство состоит из 12 шрифты

Cобственный текст

Pазмер очень маленькиймаленькийсреднийбольшойочень большой

Oтправить

Назад

  • Ударения (частичные)
  • Ударения (полные)
  • Евро
  • Mузыка

SourceSansPro-Semibold. ttf

Таблица символов

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

Основная информация о шрифте

О авторских правах

Copyright 2010, 2012 Adobe Systems Incorporated. All Rights Reserved.

Шрифтовая семья

Source Sans Pro Semibold

Шрифтовая подсемья

Regular

Уникальная подсемейная идентификация

1.036;ADBE;SourceSansPro-Semibold;ADOBE

Полное имя шрифта

Source Sans Pro Semibold

Имя настольной версии

Version 1.036;PS Version 1.000;hotconv 1.0.70;makeotf.lib2.5.5900

Имя поскрипт шрифта

SourceSansPro-Semibold

О торговой марке

Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries.

О производителе

Дизайнер

Paul D. Hunt

Дополнительная информация о шрифте

Поддерживаемые платформы

ПлатформаКодировка

MicrosoftТолько BMP юникод

MacintoshЛатинская

ЮникодЮникод 2. 0 и прогрессивная семантика, только Юникод BMP

Детали шрифта

Создан2012-09-12

Просмотр1

Количество глифов656

Единиц на Em1000

Права внедренияBнедрение для стационарной установки

Класс семействаБез засечек

НасыщенностьПолу-жирный

ШиринаСредний (нормальный)

Mac стильЖирные

НаправлениеГлифы направленные слева направо + нейтральные

УзорPегулярный

ВысотаНе моноширинный

SourceSansPro-Semibold.ttf
SourceSansPro-Black.ttf
SourceSansPro-Light.ttf
SourceSansPro-Italic.ttf
SourceSansPro-BlackItalic.ttf
SourceSansPro-BoldItalic.ttf
SourceSansPro-LightItalic.ttf
SourceSansPro-ExtraLightIt.otf
SourceSansPro-Bold.ttf
SourceSansPro-ExtraLight.otf
SourceSansPro-SemiboldItalic.ttf
SourceSansPro-Regular.ttf

  • Ударения (частичные)
  • Ударения (полные)
  • Евро
  • Mузыка

SourceSansPro-Black. ttf

  • Ударения (частичные)
  • Ударения (полные)
  • Евро
  • Mузыка

SourceSansPro-Light.ttf

  • Ударения (частичные)
  • Ударения (полные)
  • Евро
  • Mузыка

SourceSansPro-Italic.ttf

  • Ударения (частичные)
  • Ударения (полные)
  • Евро
  • Mузыка

SourceSansPro-BlackItalic.ttf

  • Ударения (частичные)
  • Ударения (полные)
  • Евро
  • Mузыка

SourceSansPro-BoldItalic. ttf

  • Ударения (частичные)
  • Ударения (полные)
  • Евро
  • Mузыка

SourceSansPro-LightItalic.ttf

  • Ударения (частичные)
  • Ударения (полные)
  • Евро
  • Mузыка

SourceSansPro-ExtraLightIt.otf

  • Ударения (частичные)
  • Ударения (полные)
  • Евро
  • Mузыка

SourceSansPro-Bold.ttf

  • Ударения (частичные)
  • Ударения (полные)
  • Евро
  • Mузыка

SourceSansPro-ExtraLight. otf

  • Ударения (частичные)
  • Ударения (полные)
  • Евро
  • Mузыка

SourceSansPro-SemiboldItalic.ttf

  • Ударения (частичные)
  • Ударения (полные)
  • Евро
  • Mузыка

SourceSansPro-Regular.ttf

font-weight — CSS: каскадные таблицы стилей

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

 
шрифт: нормальный;
font-weight: жирный;


font-weight: светлее;
font-weight: жирнее;


font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; // нормальный
font-weight: 500;
font-weight: 600;
font-weight: 700; // полужирный
font-weight: 800;
font-weight: 900;


вес шрифта: наследовать;
font-weight: начальный;
font-weight: не установлено;
  

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

Значения

нормальный
Нормальная толщина шрифта. То же, что 400 .
полужирный
Толщина жирного шрифта. То же, что 700 .
Зажигалка
На один относительный вес шрифта легче, чем у родительского элемента. Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел «Значение относительных весов» ниже.
полужирный
На один относительный вес шрифта тяжелее родительского элемента.Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел «Значение относительных весов» ниже.
<номер>
<число> , значение от 1 до 1000 включительно. Более высокие числа обозначают веса, которые жирнее (или полужирнее), чем более низкие числа. Некоторые часто используемые значения соответствуют общим именам весов, как описано в разделе «Сопоставление общих имен весов» ниже.

В более ранних версиях спецификации font-weight свойство принимает только значения ключевых слов и числовые значения 100, 200, 300, 400, 500, 600, 700, 800 и 900; неизменяемые шрифты действительно могут использовать только эти установленные значения, хотя мелкие значения (например. грамм. 451) будет преобразовано в одно из этих значений для неизменяемых шрифтов с использованием системы резервных весов.

CSS Fonts Level 4 расширяет синтаксис, чтобы принимать любое число от 1 до 1000, и вводит переменные шрифты, которые могут использовать этот гораздо более мелкозернистый диапазон веса шрифта.

Резервные веса

Если точный вес недоступен, то для определения фактически визуализированного веса используется следующее правило:

  • Если заданный целевой вес находится между 400 и 500 включительно:
    • Найдите доступные веса между целевым значением и 500 в порядке возрастания.
    • Если совпадений не найдено, ищите доступные веса меньше целевого в порядке убывания.
    • Если совпадений не найдено, ищите доступные веса больше 500 в порядке возрастания.
  • Если задан вес меньше 400 , ищите доступные веса меньше целевого в порядке убывания. Если совпадений не найдено, ищите доступные веса, превышающие целевой, в порядке возрастания.
  • Если задан вес, превышающий 500 , ищите доступные веса, превышающие целевой, в порядке возрастания.Если совпадений не найдено, ищите доступные веса меньше целевого в порядке убывания.

Значение относительных весов

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

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

Унаследованное значение полужирный зажигалка
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700

Отображение общих названий весов

Числовые значения от 100 до 900 примерно соответствуют следующим общим названиям весов (см. Спецификацию OpenType):

Значение Общее название массы
100 Тонкий (линия роста волос)
200 Extra Light (Ультра легкий)
300 Свет
400 Обычный (Обычный)
500 Средний
600 Полужирный (Demi Bold)
700 Полужирный
800 Extra Bold (Ультра жирный)
900 Черный (тяжелый)
950 Extra Black (Ультра-черный)

Варианты шрифтов

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

Для шрифтов с переменной шириной TrueType или OpenType вариант «wght» используется для реализации различной ширины.

Для работы приведенного ниже примера вам понадобится браузер, поддерживающий синтаксис CSS Fonts Level 4, в котором font-weight может быть любым числом от 1 до 1000.

HTML
  <заголовок>
    
    

.… было бы нехорошо встретить мегалозавра, длиной около сорока футов, который ковыляет, как слоновая ящерица, по Холборн-Хилл.

CSS
 

@ font-face {
  src: url ('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf');
  семейство шрифтов: 'MutatorSans';
  стиль шрифта: нормальный;
}

метка {
  шрифт: 1rem моноширинный;
  белое пространство: nowrap;
}

.container {
  максимальная высота: 150 пикселей;
  переполнение-у: авто;
}

.образец {
  текст-преобразование: прописные буквы;
  шрифт: 1. 5rem 'MutatorSans', без засечек;
}
  
JavaScript
  пусть weightLabel = document.querySelector ('label [for = "weight"]');
let weightInput = document.querySelector ('# вес');
let sampleText = document.querySelector ('. sample');

function update () {
  weightLabel.textContent = `вес шрифта: $ {weightInput.value};`;
  sampleText.style.fontWeight = weightInput.value;
}

weightInput.addEventListener ('ввод', обновление);

Обновить();
  

Люди с ослабленным зрением могут испытывать трудности с чтением текста, для которого установлено значение font-weight , равное 100 (тонкие / тонкие) или 200 (сверхлегкие), особенно если шрифт имеет низкую контрастность цвета.

Установка толщины шрифта

HTML
  

Алисе стало очень надоедать сидеть рядом с сестрой на банка, и от того, что ей нечего делать: раз или два она заглянула в книга, которую читала ее сестра, но в ней не было ни картинок, ни разговоров на «а что толку от книги», - подумала Алиса, - без картинок или разговоры? "

Я тяжелый
Я легче
CSS
 
п {
  font-weight: жирный;
}


div {
 font-weight: 600;
}


охватывать {
  font-weight: светлее;
}  
Результат

Таблицы BCD загружаются только в браузере

Как установить полужирный шрифт с помощью CSS? Плотность шрифта 600 не делает его похожим на полужирный шрифт, который я вижу в моем файле Photoshop

.

Семейства шрифтов состоят из нескольких отдельных шрифтов

Например, экстра-полужирный шрифт изменит вид шрифта, скажем, в Photoshop, потому что вы выбираете другого шрифта .То же самое и с курсивным шрифтом, который действительно может выглядеть по-разному. Установка font-weight: 800 или font-style: italic может привести к тому, что веб-браузер приложит все усилия для увеличения или уменьшения размера обычного шрифта в семействе .

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

Пример

В этом примере указываются светлый, нормальный, нормальный курсив, полужирный и экстра-полужирный шрифт в семействе шрифтов Open Sans:

  
  
    <ссылка rel = "таблица стилей"
          href = "https://fonts. googleapis.com/css?family=Open+Sans:100,400,400i,600,800">
    <стиль>
      тело {
        семейство шрифтов: 'Open Sans', serif;
        размер шрифта: 48 пикселей;
      }
    
  
  
    
Работал не со всеми шрифтами
Работал не со всеми шрифтами
Работал не со всеми шрифтами

Номер ссылки

(Предупреждение Quora, удалите, если не разрешено.)

https://www.quora.com/How-do-I-make-Open-Sans-extra-bold-once-imported-from-Google-Fonts

Тестирование

Протестировано для работы в Firefox 66.0.3 на Mac и Firefox 36.0.1 в Windows.

Остальные шрифты должны быть загружены на сервер, стиль и вес должны определяться их индивидуальными именами.

Ничего не предполагайте с точки зрения шрифтов о том, какое устройство посещает ваш веб-сайт или какие шрифты установлены в его ОС.

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

Тестирование следует проводить с шрифтом, временно удаленным из вашей системы, чтобы убедиться, что ваш дизайн действует.

Часто используемые имена для значений веса шрифта CSS · GitHub

Часто используемые имена для значений веса шрифта CSS · GitHub

Мгновенно делитесь кодом, заметками и фрагментами.

Часто используемые имена для значений CSS font-weight

неизвестный источник

значение название
100 сверхлегкий / сверхлегкий
200 легкий / тонкий
300 книга / полусвет / свет
400 обычный / нормальный
500 средний
600 полужирный / полужирный
700 полужирный
800 черный / экстра жирный / тяжелый
900 экстрачерный / жирный / плакат / ультрачерный / плотный
значение название
100 Тонкий
200 Extra Light (Ультра легкий)
300 Свет
400 Нормальный
500 Средний
600 Полужирный (Demi Bold)
700 Полужирный
800 Extra Bold (Ультра жирный)
900 Черный (тяжелый)
значение название
100 Ультратонкий
150 Экстратонкий
200 Тонкий
250 ExtraLite
300 Lite
350 Книга
375 Текст
400 Нормальный
425 Толстый
450 ExtraThick
500 Темный
550 Экстра Темный
600 Полужирный
650 ЭкстраЖирный
700 Ультраболд
800 Черный
900 Экстра черный
999 Ультрачерный
Вы не можете выполнить это действие в настоящее время. Вы вошли в систему с другой вкладкой или окном. Перезагрузите, чтобы обновить сеанс. Вы вышли из системы на другой вкладке или в другом окне. Перезагрузите, чтобы обновить сеанс.

Свойство font-weight — Типографика — HTML Academy

HTML

Сайт начинающего программиста <заголовок>

Блог

<основной> <статья>

День второй. Я хочу стать кодером

Сегодня весь вечер провел в Интернете. Я читал о преимуществах работы кодером. Конечно, в свободное время я часто смотрел видео с котиками. Но потом кое-что вспомнил:

  • Вы помогаете полезному делу.
  • Вы можете работать удаленно.
  • Интересные люди
  • Хорошая зарплата

Мое желание учиться резко возросло.