Menentukan Gaya dan Berat untuk Google Fonts

110

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?

css fonts

— Steven Garcia
sumber

149

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'>

— Marco Johannesen
sumber

56

ini adalah sebagian kebenaran, dan karena jika Anda tidak membebani tautan css google tidak akan mengunduh format "tebal" yang tepat untuk mencapai ini, Anda harus menyatakan "link href" sebagai berikut: <link href = ' fonts.googleapis .com / css? family = Comfortaa: 400.700 'rel =' stylesheet 'type =' text / css '>

— ncubica

3

Adakah cara untuk membuat browser menggunakan bobot 600 untuk aturan lama saya yang "tebal"? Saya pikir 700 terlalu tebal dan tidak menginginkannya di mana pun di situs saya.

— Nic Cottrell

Maksud kamu apa? Saya kira Anda hanya perlu mengubah tebal menjadi 600 ?. Apakah yang Anda maksud adalah mengubah perilaku "berani" <strong>dan <b>?

— Marco Johannesen

2

Saya menggunakan @import url ( fonts.googleapis.com/css?family=Open+Sans:400,300 ); karena saya tidak dapat mengakses html, dan ketika saya mencoba dan menggunakan yang berikut ... font-family: 'Open Sans', sans-serif; font-weight: 300; itu tidak mengubah bobot font. ide ide?

— Tony Ray Tansley

@TonyRayTansley apakah Anda memilikinya di baris pertama file CSS? : I

— Marco Johannesen

12

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.

— NetFool
sumber

9

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;

— Pramesh Bajracharya
sumber

Bagus. Tapi bisakah font lebih ringan dari font-weight: 100?

— John Max

3

Tidak, nilai minimum hanya 100 dan nilai maksimum 900.

2

Ini tidak benar, nilai-nilai berikut harus dipertimbangkan: light: font-weight: 300; normal: font-weight: 400; semi-bold: font-weight: 600; bold: font-weight: 700; extra bold: font-weight: 800;

— geraldo

2

Anda dapat menggunakan nilai bobot yang ditentukan di Google Fonts.

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

— Ritam Das
sumber