Визначення стилю та ваги для Google Шрифтів

110

Я використовую шрифти Google на кількох своїх сторінках і натискаю на стіну, коли намагаюся використовувати варіанти шрифту. Приклад: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans

Я імпортую три обличчя, звичайне, жирне, ExtraBold через тег посилання. Нормальне обличчя відображається правильно, але я не можу зрозуміти, як використовувати варіанти шрифту в моєму CSS

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

"Відкрити без сміливості"
"Відкрити Sans 700"
"Відкрити без сміху 700"
"Відкриті не: сміливі"

Самі документи 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 не завантажуйте належний "жирний" формат, щоб досягти цього, вам слід оголосити "link href" так: <link href = ' fonts.googleapis .com / css? family = Comfortaa: 400,700 'rel =' stylesheet 'type =' text / css '>

— ncubica

3

Чи є спосіб змусити браузер використовувати вагу 600 для старих моїх старих правил "жирних"? Я думаю, що 700 занадто товстий, і я не хочу його ніде на своєму сайті.

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

Що ви маєте на увазі? Я думаю, вам слід просто змінити сміливий на 600 ?. Ви маєте на увазі зміни "сміливої" поведінки на <strong>і <b>?

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

2

Я використовую @import url ( fonts.googleapis.com/css?family=Open+Sans:200,300 ); як я не можу отримати доступ до html, і коли я намагаюся використовувати наступне ... сімейство шрифтів: 'Open Sans', sans-serif; шрифт: 300; вона не змінює вагу шрифту. ідеї?

— Tony Ray Tansley

@TonyRayTansley це у вас в першому рядку файлу CSS? : Я

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

12

Ось проблема: Ви не можете вказати вагу шрифту, яка не існує в наборі шрифтів від 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 вагах.

— 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;

— Прамеш Байрачаря
джерело

Чудово. Але чи може шрифт бути легшим, ніж шрифт: 100?

— Джон Макс

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.

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

— Ritam Das
джерело