Указание стиля и веса для Google Fonts

Я использую шрифты Google на нескольких моих страницах и нажимаю на стену, пытаясь использовать вариации шрифта. Пример: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans

Я импортирую три лица: Normal, Bold, ExtraBold через тег ссылки. Нормальное лицо отображается правильно, но я не могу понять, как использовать варианты шрифта в моем CSS

Я попробовал все следующие атрибуты для семейства шрифтов, но не в кости:

  • 'Open Sans Bold'
  • 'Open Sans 700'
  • 'Open Sans Bold 700'
  • 'Open Sans: Bold'

Документы google сами не предлагают большой помощи. У кого-нибудь есть идея, как я должен писать свои правила CSS для отображения этих вариантов?

Ответы

Ответ 1

Они используют обычный CSS.

Просто используйте обычные семейства шрифтов следующим образом:

font-family: 'Open Sans', sans-serif;

Теперь вы решаете, какой "вес" должен иметь шрифт, добавив

для полужирного

font-weight:600;

для жирного шрифта (700)

font-weight:bold;

для дополнительной жирной (800)

font-weight:800;

Подобным образом это резервное доказательство, поэтому, если шрифт google должен "сбой", ваш резервный шрифт Arial/Helvetica (Sans-serif) использует тот же вес, что и шрифт google.

Довольно умный: -)

Обратите внимание, что различные шрифты шрифта должны быть специально импортированы через URL-адрес тега ссылки (параметр семейного запроса URL-адреса шрифта google) в заголовке.

Например, следующая ссылка будет содержать как вес 400, так и 700:

<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>

Ответ 2

font-family:'Open Sans' , sans-serif;

Для света: font-weight : 100; Или же font-weight : lighter;

Для нормальных: font-weight : 500; Или же font-weight : normal;

Для смелых: font-weight : 700; Или же font-weight : bold;

Для более смелых: font-weight : 900; Или же font-weight : bolder;

Ответ 3

вы можете использовать значение веса, указанное в шрифтах Google.

body{
 font-family: 'Heebo', sans-serif;
 font-weight: 100;
}

Ответ 4

Здесь проблема: вы не можете указать вес шрифта, который не существует в наборе шрифтов от Google. Нажмите на ссылку SEE SPECIMEN под шрифтом, затем прокрутите вниз до раздела STYLES. Там вы увидите каждый из "стилей", доступных для этого конкретного шрифта. К сожалению, Google не перечисляет веса шрифтов CSS для каждого стиля. Вот как имена отображаются на весовые номера шрифтов CSS:

Thin            100     
Extra Light     200
Light           300
Regular         400
Medium          500
Semi-Bold       600
Bold            700
Black           900

Обратите внимание, что очень мало шрифтов входят во все 9 весов.