Semibold css: How do I set ‘semi-bold’ font via CSS? Font-weight of 600 doesn’t make it look like the semi-bold I see in my Photoshop file

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

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

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

Я пытаюсь установить вес шрифта выбранного элемента панели вкладок на полужирный шрифт. Вроде как это не имеет никакого эффекта. Любая идея, что не так. 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; Мне нужно установить вес шрифта для этих шрифтов со…

ОБНОВЛЕНИЕ. Я перепробовал все предложения. Но все равно не могу заставить 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 до следующего возможного для данного шрифта значения, согласно следующей таблице.

Значения «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 до 900 примерно соответствуют следующим общим названиям весов (см. Спецификацию OpenType):

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

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

Для шрифтов с переменной шириной 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 font-weight

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

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

<заголовок>

Блог

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

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

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

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