Mengatur font-weight vs bold font-family di CSS, mana yang lebih benar?

9

Pada dasarnya ada dua cara untuk membuat huruf tebal dalam CSS: melalui font-familyatribut dan melalui font-weightatribut.

Katakanlah saya menggunakan font Raleway misalnya dan telah memuat varian Light, a Regular, Semibold, dan Bold via css. Saya bisa mengubah judul yang sederhana dengan mengaturnya ke h1{font-family: 'Raleway Bold'}atau ke h1{font-weight: 700}.

Yang mana yang lebih benar, atau keduanya sama?

css web-fonts html pooja
sumber
Saya ragu, bahwa baik menulis "font-weight" dalam css sudah benar, ketika Anda memiliki semua opsi dalam keluarga font. misal: font Raleway memiliki semua opsi mulai dari yang terang hingga yang lebih tebal. Jadi cara mana yang tepat untuk menggunakan semua font dari keluarga, sehingga kita tidak bisa kehilangan karakter font.
pooja
1
T&J sangat terkait .
Cai
@ poojaa, saya telah mengambil kebebasan mengedit pertanyaan Anda untuk membuat pemformatan lebih jelas dan membawa pertanyaan aktual lebih ke latar depan. Jika Anda merasa saya telah mengubah artinya, Anda dapat mengeditnya sendiri.
PieBie

Jawaban:

6

Katakanlah kita telah memuat varian huruf Bold seperti ini:

@font-face {
  font-family: 'Raleway Bold';
  font-style: normal;
  font-weight: 700;
  src: url(path/to/font/raleway-bold.woff2) format('woff2');
}

Saya akan mendukung penggunaan keduanya font-familydan font-weightdalam spesifikasi gaya Anda. Sebagai contoh:

h1 {
  font-weight: 700;
  font-family: 'Raleway Bold', Helvetica, Arial, sans;
}

Keduanya pada dasarnya melakukan hal yang sama: beri tahu heading1 Anda untuk berani. Ini tidak akan menggandakan keberanian atau apa pun, itu hanya mengulang bahwa itu harus berani.

Alasan untuk ini cukup sederhana: jika file font Anda tidak dimuat (server overload, pembatasan klien, voodoo), maka pengunjung Anda masih akan melihat huruf tebal (dalam hal ini Helvetica palsu palsu) dan dengan demikian dapat membedakan antara judul dan teks isi, yang tidak akan menjadi kasus seandainya Anda hanya menentukan font-family.

Lihat dalam gambar ini set teratas adalah Raleway dan Raleway Italic tetapi memiliki Raleway Italic yang sesuai dengan:

<link href='https://fonts.googleapis.com/css?family=Raleway:500,500italic' rel='stylesheet' type='text/css'>

Bagian bawah hanya memuat Raleway. Akibatnya set bawah memiliki italic Raleway dan FAUX Raleway. Perhatikan perbedaan dalam huruf kecil "a" dan "k" misalnya antara italic nyata dan italic palsu. Font yang dirancang dengan baik akan memiliki perbedaan antara pelanggan tetap, cetak tebal, dan miring yang tidak akan Anda dapatkan jika Anda tidak memuatnya.

masukkan deskripsi gambar di sini

PieBie
sumber
Menggunakan satu nama keluarga dan hanya menetapkan bobot masih akan memberi Anda bobot yang benar jika file font tidak dimuat. Satu-satunya alasan untuk menggunakan keduanya adalah karena alasan kompatibilitas.
Cai
1
Anda bingung. Contoh font Google Anda tidak hanya merujuk ke italic Raleway hanya sebagai font-family: 'Raleway'(bertentangan dengan contoh Anda yang berani di atas) tetapi, Selain itu, Terlepas dari penamaan seluruh keluarga Ralewayatau masing-masing varian secara terpisah dengan nama font-family yang berbeda, sama sekali tidak ada hubungannya dengan menerapkan kecurangan atau tidak . Bahkan contoh Anda sendiri membuktikan ini adalah metode yang salah, seperti yang Anda sediakan font-family: 'Raleway Bold', Helvetica, Arial, sans;miliki Helvetica Bolddan secara Arial Boldindividual karena itu hanya cara yang salah untuk membuat variasi font.
rgthree
1

Meskipun kedua cara akan memberikan Anda hasil yang benar, cara yang lebih tepat adalah dengan menggunakan satu font-family untuk mengelompokkan semua varian bobot dan gaya yang berbeda. Ini adalah cara yang sama Anda menggunakan font sistem (dari 'Arial' ke 'sans-serif') dan, pada kenyataannya, jika Anda menggunakan font Google untuk memuat Raleway Anda akan menggunakan rute keluarga font tunggal.

Mari kita uraikan beberapa alasan mengapa ini adalah metode yang benar.

Ini mengurangi kompleksitas CSS dan, pada akhirnya, ukuran file

Memiliki satu font-family berarti Anda dapat mendefinisikan seluruh elemen yang mengandung dengan font family, dan hanya elemen tertentu dengan bobot / gaya yang berbeda. Ambil yang berikut ini, misalnya:

html {
  font-family: Raleway;
}
.bold {
  font-weight: 700;
}
.italic {
  font-style: italic;
}
.footer {
  font-family: Arial;
}

<p>I'm raleway font, <span class="bold">and I'm raleway bold</span></p>
<div class="bold italic">I'm Raleway Bold Italic!</div>
<div class= footer>I'm <span class="bold">Arial Bold,</span> w/ the same class!</div>

Perhatikan betapa bagus dan meyakinkan CSS ini. Kita tidak perlu menentukan "RalewayBold" sebagai font-family untuk .bold, atau "RalewayItalic" untuk .italic kita. Bahkan, kita bahkan tidak perlu menentukan varian tebal & miring, karena kelas kita hanya akan berfungsi. Lebih jauh, jika .bold ada di dalam .footer kita, itu akan menjadi Arial yang tebal dan bukan Raleway, karena ia hanya mewarisi Arial dari wadah footer.

Begitulah cara browser melakukannya.

Di atas pada dasarnya adalah bagaimana stylesheet internal browser mendefinisikan font dengan menggunakan gaya minimal dan sifat cascading yang melekat pada CSS.

Begitulah cara industri melakukannya dan telah melakukannya.

Properti web terbesar, aplikasi dan penerbit semuanya melakukannya dengan cara ini. Google, Facebook, NYT, ESPN, dll. Semua mendefinisikan dan menggunakan font dengan cara ini.

Tidak hanya itu, tetapi antarmuka pengguna sebelum CSS atau bahkan internet menentukan font-family tunggal dan memilih varian berdasarkan spesifikasi berat dan gaya yang berbeda. Muat Microsoft Word, KeyNote, Google Documents, bahkan WordPerfect tua tahun 1990-an dan buka drop-down font; Anda akan melihat font-family name "Arial" terdaftar; bukan "Arial" diikuti oleh "Arial Bold" diikuti oleh "Arial Italic" dll.

Cukup muat dari Google Font.

Jika Anda memuat Raleway dari repositori webfont gratis di Google Fonts, Anda akan melihat Raleway didefinisikan dengan satu nama keluarga:

https://fonts.googleapis.com/css?family=Raleway:400,400italic,500,500italic,700,700italic

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url(https://...Raleway-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 500;
  src: url(https://...Raleway-MediumItalic.woff2) format('woff2');
}
@font-face {
  font-family: 'italic';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-BoldItalic.woff2) format('woff2');
}
rgthree
sumber
Bukankah metode ini mengabaikan variasi antara gaya font untuk yang palsu?
Ryan
@Ryan Tidak sama sekali. Bahkan, nama font family (baik bundling keluarga Ralewaydengan varian berat / gaya, atau salah mendefinisikan varian individu Raleway Bolddan Raleway Italicsebagai keluarga font individu) tidak ada hubungannya dengan menerapkan variasi palsu atau tidak. Faktanya, menggabungkan keluarga dengan nama yang sama membantu browser memilih variasi yang lebih dekat untuk menerapkan gaya palsu sementara salah menyebutkan setiap variasi secara terpisah membuat browser tetap gelap dalam font yang tersedia untuk menerapkan variasi jika font yang diinginkan tidak dimuat.
rgthree
(1) Hanya memuat dari font Google : untuk situs web tentunya, tetapi ada banyak contoh lain di mana html / css digunakan di mana koneksi internet tidak dijamin dan Anda harus memuat font secara lokal, (2) Ini mengurangi kompleksitas CSS pada akhirnya, ukuran file : jadi Anda akan mencukur 1kb di situs atau aplikasi yang lusinan MB, klien akan kagum dengan seberapa cepat aplikasi Anda dimuat, (3) seperti cara browser / industri melakukannya : browser default ke faux, dan lagi pula 'industri' tidak selalu benar juga tidak mengikuti praktik terbaik (lihat saja flexbox)
PieBie
browser default untuk imitasi Apa? Anda jelas tidak tahu apa yang sedang Anda bicarakan. Ketika Anda menentukan font-family:Arial; font-weight:bold;(yang, sekali lagi adalah cara yang tepat untuk melakukannya, terlepas dari apakah itu Arial atau Raleway) menurut Anda apakah peramban tersebut menerapkan huruf tebal ke wajah font Arial yang normal? Salah. Peramban memuat wajah font ArialBold ketika sistem mendefinisikan dan hanya jika tidak ada font yang tepat yang tersedia, itu akan menerapkan gaya palsu ke font yang paling cocok berdasarkan nama font-family, itulah sebabnya mereka harus sama! Tidak bisa mengatakan "Lakukan ini untuk Arial, tetapi tidak untuk Raleway."
rgthree
0

Begini masalahnya, Jika Anda mengajukan pertanyaan tentang Raleway, sebuah webfont yang diprogram untuk css, kedua cara bekerja sama baiknya. Dalam hal ini Gunakan font-weight karena ini adalah tindakan yang "benar" yang akan paling mudah untuk diubah dan dikendalikan tanpa perubahan besar dalam kode.

Sekarang Anda mulai memiliki masalah setelah Anda menanamkan font sendiri, font yang belum tentu direncanakan untuk css dan bobot mungkin tidak cocok dengan angka.

Karena itu, bug yang sangat umum pada font yang disematkan, yang sangat umum pada font non-Inggris, adalah css "boldens" atau "lightens" font secara otomatis dan hasilnya sangat buruk.

Karena itu saya sarankan jika Anda menggunakan webfont seperti font pada font google, silakan dan gunakan angka pada font-weight, tetapi ketika Anda menanamkan font sendiri, tetaplah di sisi yang aman dan gunakan font-family untuk setiap bobot tunggal secara terpisah .

Naty
sumber