Menentukan Gaya dan Berat untuk Google Fonts

Saya menggunakan font Google di beberapa halaman saya dan mengalami masalah saat mencoba menggunakan variasi font. Contoh: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans

Saya mengimpor tiga wajah, Normal, Tebal, EkstraBold melalui tag tautan. Wajah normal ditampilkan dengan benar, tetapi saya tidak tahu bagaimana menggunakan varian font di CSS saya

Saya mencoba semua yang berikut sebagai atribut untuk font-family tetapi tidak ada dadu:

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

Google docs sendiri tidak menawarkan banyak bantuan. Adakah yang punya ide tentang bagaimana saya harus menulis aturan CSS saya untuk menampilkan varian ini?

Mereka menggunakan CSS biasa.

Cukup gunakan keluarga font biasa Anda seperti ini:

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

Sekarang Anda memutuskan apa "bobot" font yang harus dimiliki dengan menambahkan

untuk semi-tebal

font-weight:600;

untuk tebal (700)

font-weight:bold;

untuk ekstra tebal (800)

font-weight:800;

Seperti ini bukti fallback-nya, jadi jika font google harus "gagal" font cadangan Anda Arial / Helvetica (Sans-serif) gunakan bobot yang sama dengan font google.

Cukup pintar :-)

Perhatikan bahwa bobot font yang berbeda harus diimpor secara khusus melalui url tag tautan (parameter kueri keluarga dari url font google) di tajuk.

Misalnya, tautan berikut akan menyertakan bobot 400 dan 700:

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

Inilah masalahnya: Anda tidak dapat menentukan bobot font yang tidak ada di kumpulan font dari Google. Klik tautan LIHAT SPESIMEN di bawah font, lalu gulir ke bawah ke bagian GAYA. Di sana Anda akan melihat setiap "gaya" yang tersedia untuk font tersebut. Sayangnya Google tidak mencantumkan bobot font CSS untuk setiap gaya. Inilah cara nama memetakan ke angka bobot font CSS:

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

Perhatikan bahwa sangat sedikit font yang memiliki 9 bobot.

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

Untuk cahaya: font-weight : 100; Atau font-weight : lighter;

Untuk normal: font-weight : 500; Atau font-weight : normal;

Untuk huruf tebal: font-weight : 700; Atau font-weight : bold;

Untuk lebih berani: font-weight : 900; Atau font-weight : bolder;

Anda dapat menggunakan nilai bobot yang ditentukan di Google Fonts.

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