Font web
Ada 2 cara untuk mendefinisikan font-web @font-face. Yang pertama, dan mungkin yang paling umum (saya percaya sebagian besar generator, Font Squirrel misalnya, akan menampilkan ini) adalah mendefinisikan setiap file font (yaitu masing-masing berat dan gaya) dengan nama keluarga yang unik.
@font-face {
font-family: 'YourFont';
src: url('your_font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'YourFontBold';
src: url('your_font_bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'YourFontItalic';
src: url('your_font_italic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Perhatikan font-weightdan font-stylepada setiap diatur normal dan masing-masing memiliki keunikan font-familynama. Ini berarti bahwa setiap kali Anda mengatur a font-weightatau font-styleapa pun selain yang normal, Anda menerapkan gaya "faux" browser, bukan gaya dari file font yang benar. Ini juga dapat menyebabkan huruf "ganda" dicetak tebal atau miring jika Anda tidak mereset gaya browser default CSS ke 'normal'. Sebagai contoh:
strong {
font-family: 'YourFontBold';
}
Tanpa mengatur ulang font-weightke normal, itu akan membuat lebih berani dari yang seharusnya karena browser memuat file huruf tebal dan menambahkan gaya huruf tebal sendiri palsu karena gaya default untuk strongadalah font-weight: bold;.
Cara yang lebih baik:
@font-face {
font-family: 'YourFont';
src: url('your_font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'YourFont';
src: url('your_font_bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'YourFont';
src: url('your_font_italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
Perhatikan definisi font-weightdan font-stylesesuai dengan file font dengan benar dan semua menggunakan font-familynama yang sama . Mendeklarasikan font Anda dengan cara ini berarti Anda dapat menggunakan font-weightdan font-styledi mana saja di CSS Anda persis seperti yang Anda harapkan dan Anda akan mendapatkan font yang benar, tanpa gaya "faux".
Hanya kata kunci "tebal" dan "miring" yang mungkin dipahami oleh semua browser, jadi Anda harus menggunakan angka berat font tertentu. Perlu diingat juga bahwa browser biasanya tidak membulatkan bobot font dengan baik, jadi tentukan berat yang Anda inginkan dengan tepat dan pastikan mereka cocok dengan @font-facedeklarasi dan gaya CSS Anda.
Masalah dengan metode ini adalah bahwa Internet Explorer 8 atau di bawah tidak mengenali banyak gaya dan bobot yang menggunakan font-familynama yang sama . Saya percaya ini juga menyebabkan masalah pada versi iOS yang lebih lama
Google Font mengatasi hal ini dengan menyajikan IE 8 secara kondisional atau lebih rendah dengan hanya font biasa dan membiarkan IE "memalsukan" gaya lainnya. Tidak ideal
Artikel ini di smashingmagazine.com menyarankan menambahkan gaya secara terpisah untuk Internet Explorer, yang harus mengatasi masalah beberapa bobot dan gaya:
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700italic" rel="stylesheet" type="text/css">
<![endif]-->
Jadi, jika Anda ingin menggunakan font-weightdan font-styledalam CSS Anda tanpa khawatir tentang nama font yang sebenarnya, jangan mengandalkan generator font web dan mengatur sendiri @font-facedeklarasi dengan benar, dan ketahuilah itu akan menyebabkan masalah di browser lama.
Fon desktop
Mendeklarasikan font yang tidak tertanam menggunakan @font-facehanya akan menggunakan font yang diinstal pada komputer pengguna. Ini harus menghormati apa saja font-weightdan font-stylegaya dan memuat font yang benar (Semua tes saya di Chrome dan Firefox pada OS X berfungsi seperti yang diharapkan), tetapi ini mungkin tergantung pada browser dan OS, dan akan tergantung pada penamaan font di dalam file font sendiri —Hal yang tidak benar-benar Anda kendalikan.