Указание стиля и толщины шрифтов Google

111

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

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

Я пробовал все следующие атрибуты для font-family, но без кубиков:

'Open Sans Bold'
'Open Sans 700'
'Open Sans Bold 700'
Open Sans: жирный

Сами документы Google не предлагают особой помощи. Кто-нибудь знает, как мне написать свои правила CSS для отображения этих вариантов?

css fonts

— Стивен Гарсия
источник

149

Они используют обычный 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'>

— Марко Йоханнесен
источник

56

это частичная правда, и потому что, если вы не определяете вес ссылки css, Google не будет загружать правильный «жирный» формат, чтобы добиться этого, вы должны объявить «ссылку href» следующим образом: <link href = ' fonts.googleapis .com / css? family = Comfortaa: 400,700 'rel =' stylesheet 'type =' text / css '>

— ncubica

3

Есть ли способ заставить браузер использовать вес 600 для старых моих старых правил «жирного»? Я думаю, что 700 слишком толстый и не хочу, чтобы он нигде на моем сайте.

— Ник Коттрелл

Что вы имеете в виду? Думаю, вам стоит просто сменить полужирный шрифт на 600 ?. Вы имеете в виду изменение «смелого» поведения на <strong>и <b>?

— Марко Йоханнесен

2

Я использую URL-адрес @import ( fonts.googleapis.com/css?family=Open+Sans:400,300 ); поскольку я не могу получить доступ к html, и когда я пытаюсь использовать следующее ... семейство шрифтов: 'Open Sans', sans-serif; font-weight: 300; он не меняет толщину шрифта. идеи?

— Тони Рэй Тэнсли

@TonyRayTansley есть ли у вас в первой строке файла CSS? : I

— Марко Йоханнесен

12

Вот проблема: вы не можете указать веса шрифта, которых нет в наборе шрифтов от Google. Щелкните ссылку ПОСМОТРЕТЬ ОБРАЗЕЦ под шрифтом, затем прокрутите вниз до раздела СТИЛИ. Там вы увидите каждый из «стилей», доступных для этого конкретного шрифта. К сожалению, Google не перечисляет веса шрифтов CSS для каждого стиля. Вот как имена сопоставляются с номерами веса шрифта CSS:

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

Обратите внимание, что очень немногие шрифты имеют все 9 весов.

— NetFool
источник

9

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;

— Прамеш Баджрачарья
источник

Отлично. Но может ли шрифт быть легче font-weight: 100?

— John Max

3

Нет, минимальное значение только 100, а максимальное значение 900.

2

Это неверно, следует учитывать следующие значения: light: font-weight: 300; normal: font-weight: 400; semi-bold: font-weight: 600; bold: font-weight: 700; extra bold: font-weight: 800;

— geraldo

2

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

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

— Ритам Дас
источник