Saya seorang pengembang web dan saya mengerjakan proyek yang menggunakan Quicksand Light / Regular / Bold sebagai font. Font standar aplikasi web adalah Quicksand reguler tetapi ada juga teks yang lebih ringan dan lebih berani.
Sebagai pengembang web, saya biasanya menerapkan gaya CSS sederhana seperti:
font-weight: bold; // or 400, 600, 800
Apakah ini trik yang valid untuk menghindari pengaturan font ke setiap elemen yang tidak "biasa"? Jika tidak, adakah font yang berfungsi seperti ini? (yaitu memodifikasinya melalui CSS untuk mendapatkan font yang berbeda)
website-design
fonts
css
font-weight
dragonmnl
sumber
sumber
Jawaban:
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.Perhatikan
font-weight
danfont-style
pada setiap diatur normal dan masing-masing memiliki keunikanfont-family
nama. Ini berarti bahwa setiap kali Anda mengatur afont-weight
ataufont-style
apa 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:Tanpa mengatur ulang
font-weight
ke 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 untukstrong
adalahfont-weight: bold;
.Cara yang lebih baik:
Perhatikan definisi
font-weight
danfont-style
sesuai dengan file font dengan benar dan semua menggunakanfont-family
nama yang sama . Mendeklarasikan font Anda dengan cara ini berarti Anda dapat menggunakanfont-weight
danfont-style
di 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-face
deklarasi 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-family
nama yang sama . Saya percaya ini juga menyebabkan masalah pada versi iOS yang lebih lamaGoogle 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:
Jadi, jika Anda ingin menggunakan
font-weight
danfont-style
dalam CSS Anda tanpa khawatir tentang nama font yang sebenarnya, jangan mengandalkan generator font web dan mengatur sendiri@font-face
deklarasi dengan benar, dan ketahuilah itu akan menyebabkan masalah di browser lama.Fon desktop
Mendeklarasikan font yang tidak tertanam menggunakan
@font-face
hanya akan menggunakan font yang diinstal pada komputer pengguna. Ini harus menghormati apa sajafont-weight
danfont-style
gaya 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.sumber
font-family: YourFontBold; font-weight:normal;
setiap waktu. Jadi, Anda harus menggunakan metode lain.