Masa Depan Web Typography: CSS Font Level 4

() translation by (you can also view the original English article)

Font web membantu menghirup kehidupan di dalam desain, membantu kami menghindari default sistem yang begitu banyak digunakan pada masa awal desain web. A Level 4 dari CSS Fonts Module menguraikan opsi-opsi yang lebih menarik yang akan Anda sukai, termasuk beberapa properti menarik seperti font-min /max-size. Artikel ini tidak akan membuka setiap akhir level 4, tetapi akan menyoroti bagian-bagian menarik yang masih dalam tahap awal. Petualangan dimulai sekarang!

Status Quo

Saat ini kami duduk di antara dua tingkat spesifikasi. Di satu sisi kami memiliki level 3 ; spec yang telah di "Candidate Recommendation" sejak Oktober 2013. Ke depan kita memiliki level 4; spec yang telah beristirahat di "Working Draf" sejak Juli 2017. Jika Anda membutuhkan pengingat mengenai urutan tahapan spesifikasi W3C, mari kita luangkan waktu untuk memeriksanya:

Working Draft (WD): Diterbitkan untuk ditinjau oleh komunitas, termasuk Anggota W3C, publik, dan organisasi teknis lainnya. Tidak mewakili konsensus dari Kelompok Kerja atau menyiratkan pengesahan oleh W3C.
Candidate Recommendation (CR): Ditinjau secara luas dan siap untuk dimplementasikan. Tidak mengimplikasikan dukungan oleh W3C. Sinyal ke komunitas yang lebih luas bahwa sudah waktunya untuk melakukan peninjauan akhir.
Proposed Recommendation (PR): Laporan teknis yang matang dikirim ke Komite Penasehat W3C untuk pengesahan akhir.
W3C Recommendation (REC): Menerima dukungan dari Anggota W3C dan Direktur. Merekomendasikan penerapan pedoman spesifikasi secara luas.

Sekarang setelah kita memahami tahap spesifikasi, mari selami keberanian level 4 dan berikan beberapa fitur yang diketahui dan didokumentasikan baru ke modul ini.

Font Modul Level 4

Bagian level 3 yang menjadi standar akan diporting ke level 4, tetapi level 4 akan menghasilkan uniknya sendiri. Bagian seperti, Variasi Font, Font Rendering Conyrols, Dukungan Font Warna, Properti Font Dasar dan Font Resaurces akan berisi banyak item baru yang akan berguna bagi banyak pengembang.

Properti Font Dasar

Wajah font tertentu yang diberikan ditentukan oleh font-family dan properti font lainnya yang berlaku untuk elemen tertentu, seperti font-weight dan font-style misalnya. Struktur ini memungkinkan pengaturan untuk bervariasi secara independen satu sama lain dan apa yang mencakup Properti Font Dasar. Jadi apa yang direncanakan untuk grup ini?

font-min-size dan font-max-size

1	.element {
2	font-min-size: 0.875rem;
3	font-max-size: 5rem;
4	}

Dari semua yang diuraikan di tingkat 4, dua properti ini adalah favorit saya karena keduanya akan memungkinkan font-size elemen menjadi "dijepit" antara nilai yang diberikan. Ini adalah berita yang sangat luar biasa untuk penggemar desain responsif. Nilai dapat berupa ukuran absolut, ukuran relatif atau presentase panjang.

Tidak ada dokumentasi apa pun yang digunakan untuk mengubah ukuran browser memicu properti, dan jika Anda ingin berekperimen dengan fitur ini menggunakan fitur platform web ekperimental di Chrome, Anda kurang beruntung.

Spesifikasi

Sumber Font

Sebagian besar item yang diuraikan di bagian ini membantu mengontrol aspek-aspek yang berkaitan dengan pengambilan, referensi, dan menampilkan font-family yang Anda pilih.

font-display

1	@font-face {
2	font-display: auto \| block \| swap \| fallback \| optional;
3	}

Properti ini menentukan bagaimana wajah font ditampilkan, berdasarkan apakah dan kapan itu sudah diunduh dan siap digunakan oleh browser. Ini juga dimaksudkan untuk di gunakan dalam pernyataan @font-face atau @font-feature- values Anda .

auto : Kebijakan tampilan font didefinisikan oleh agen pengguna (yaitu browser) kecuali ditentukan dalam CSS secara eksplisit.
block : Memberi font menghadap periode block period (3 detik direkomendasikan dalam banyak kasus) dan swap period tak terbatas .
swap: Memberikan font menghadap block period 0s dan swap period tak terbatas .
fallback : Memberi font menghadap block period yang sangat kecil (100ms atau kurang disarankan dalam banyak kasus) dan periode swap period ( 3s direkomendasikan dalam banyak kasus ).
optional : Memberi font menghadapi block period yang sangat kecil (100 md atau kurang disarankan dalam banyak kasus) dan swap period 0s.

Bagi siapa pun yang memperhatikan kinerja font web dan yang sibuk setiap hari memperdebatkam FOUT atau FOIT , maka properti ini akan membuat Anda sangat senang.

Spesifikasi

@font-feature-values

1	@font-feature-values {
2	font-display: auto \| block \| swap \| fallback \| optional;
3	}

Ketika font-display dihilangkan dalam aturan @font-face , agen pengguna menggunakan nilai font-display yang disetel melalui @font-feature-values untuk font-family yang relevan jika tidak ada yang disetel, jika tidak maka default ke font-display: auto . Lihat penjelasan sebelumnya tentang nilai-nilai font-display.

Ruleset sempurna untuk kasus ketika font dilayani melalui pihak ketiga dan Anda tidak memiliki kontrol atas aturan @font-face , tetapi masih dapat mengatur kebijakan font-display default untuk font-family yang disediakan . Ini adalah berita bagus bagi mereka yang membangun situs dengan aksi pihak ketiga non-stop.

1	@font-feature-values {
2	font-family: "Custom Font Name", sans-serif;
3	font-display: fallback;
4	}

Meskipun masih baru dan agak kabur, saya dapat mengasumsikan untuk mengontrol perilaku tampilan font-family tertentu, pengembang harus menggunakan properti font-family dalam ruleset ini untuk menargetkan font yang diinginkan. Sekali lagi, ini hanya asumsi saya dan tidak faktual dengan cara apa pun.

Spesifikasi

Variasi Font

Bagian ini 100% baru khusus untuk level 4. Sebagian besar fitur yang saat ini didokumentasikan berkaitan dengan ukuran dan pengaturan setiap wajah font.

font-optical-setting

Properti ini digunakan untuk mempertahankan sifat gaya dan meningkatkan keterbacaan pada bagian ukuran optik. Dengan tipe digital, kami memiliki kemampuan untuk menskalakan font ke ukuran apa pun, tetapi tidak memperhitungkan tampilan jenis pada berbagai ukuran ini.

"Teks yang di berikan dalam berbagai ukuran sering menguntungkan dari representasi visual yang sedikit berbeda. Misalnya, untuk membantu membaca pada ukuran teks kecil, sapuan sering lebih tebal dengan serif yang lebih besar. Teks yang lebih besar sering memiliki.gambar yang lebih halus dengan lebih banyak kontras antara goresan yang lebih tebal dan lebih tipis. "~ Level 4 Working Draft

1	.element {
2	font-optical-sizing: auto \| none
3	}

auto : Agen pengguna dapat memodifikasi bentuk glyph berdasarkan font-size dan kerapatan piksel layar. Untuk font OpenType dan TrueType menggunakan font variasi, ini telah selesai digunakan opsz font variation.
none : Agen pengguna tidak boleh mengubah bentul glyphs untuk optical size.

Spesifikasi

pengaturan font-variasi

1	.element {
2	font-variation-settings: normal \| [ <string> <number>]
3	}

Properti ini menyediakan kontrol tingkat rendah atas variasi font OpenType atau TrueType . Ini dimaksudkan sebagai cara menyediakan akses ke variasi font yang tidak banyak digunakan, tetapi diperlukan untuk kasus penggunaan tertentu.

normal : Teks ditata menggunakan pengaturan default.
<string> <number>:,Saat merender teks, daftar nama sumbu OpenType dilewatkan ke mesin tata letak teks untuk mengaktifkan atau menonaktifkan fitur font. Setiap pengaturan selalu merupakan <string> dari 4 karakter ASCII, diikuti oleh <number> yang menunjukan nilai axis. Jika <string> memiliki lebih banyak atau lebih sedikit karakter atau berisi karakter di luar rentang kode U+20 - U+7E, seluruh code tidak valid.<number> dapat menjadi pecahan atau negatif.

1	.element {
2	/* four letter axis name and number */
3	font-variation-settings: "opsz" 0.5;
4	}

Nilai string yang digunakan dalam kode di atas dikenal sebagai nama empat huruf sumbu yang menggambarkan fitur yang Anda inginkan untuk bervariasi, bersama dengan nilai variasi biasanya mulai dari 0-1, tetapi juga bisa menjadi nilai negatif jika diperlukan. Variasi yang dibolehkan selalu bergantung pada wajah font yang dipilih.

Spesifikasi

Dukungan Font Berwarna

Font warna adalah brand-baru untuk level 4 dan font files yang menggambarkan tidak hanya kontur menggambarkan tepi mesin terbang, tetapi juga warna-warna yang ada di dalam mesin terbang. Mengapa Anda ingin menggunakan salah satu fitur ini? Saya sarankan untuk membaca artikel ini oleh Grace Fussell untuk mendapatkan kecepatan:

Fonts

What Are Color Fonts?

Grace Fussell

font-palette

1	.element {
2	font-palette: normal \| light \| dark \| <palette-identifier>;
3	}

Banyak format file font warna memungkinkan warna dalam glyphs untuk menjadi parameterized. Dalam font-font ini, warna direferasikan oleh indeks ketika menggambarkan geometri masing-masing glyph. Indeks-indeks ini diselesaikan dalam.palet aktif saat ini menggunakan tampilan tebal di dalam font. Namun banyak font mengandung beberapa palet, masing-masing berisi set warna komplementer yang dipilih oleh desainer font untuk memberikan hasil visual yang menyenangkan. Developers dapat menentukan palet dengan menggunakan aturan @font-palette-value yang disebutkam di bagian selanjutnya.

Spesifikasi

@font-palette-values

/*Syntax*/
@font-palette-values <custom-identifier> {
  <declaration-list>
}

/*Example*/
@font-palette-values Augusta {
  font-family: Handover Sans;
  base-palette: 3;
  1: rgb(43, 12, 9);
  3: var(--highlight);
}

Ini mewaki palet warna yang digunakan dalam font. Ini mendefinisikan palet warna dan rekan yang palet warna dengan font tertentu. Hal ini memungkinkan penulis web untuk memilih warna acak untuk digunakan di dalam font warna dari pada terbatas pada palet yang sudah ada sebelumnya di dalam file font.

base-palette : pendeskripsi ini menetapkan palet di font yang mengandung aturan @font-palette-values digunakan sebagai nilai awal. Jika tidak ada tombol <integer> yang ada dalam aturan @font-palette-values maka aturan @font-palette-values mewakili palet dalam font mewakili indek yang sama dengan nilai pendeskripsi ini. Jika tombol <integer> ada dalam aturan @font-palette-values , masing-masing dari deskriptor tersebut menimpa satu warna dalam palet warna yang diwakili oleh blok @font-pallete-values ini.

Spesifikasi

font-presentation

1	.element {
2	font-family: 'Custom Font Name';
3	font-presentation: auto \| text \| emoji;
4	}

Properti ini memungkinkan penulis web untuk memilih apakah presentasi emoji atau presentasi teks digunakan untuk poin kode emoji tertentu. Kemenangan besar untuk emoji fanatik😎

Spesifikasi

Kesimpulan

Pasti ada banyak fitur yang menarik yang datang ke saluran untuk font web dan saya mendorong Anda untuk mulai bereksperimen dengan favorit tertentu dari level 4 atau bahkan level 3, beri tahu kami di komentar termasuk pendapat Anda tentang fitur yang telah kami diskusikan.

Saya juga menyarankan developers untuk melihat spesifikasi css-font-loading jika membuat kinerja adalah sesuatu yang sangat Anda pedulikan. Anda dapat memantau dukungan karena adopsi cukup layak di seluruh vendor peramban. Nikmati era baru font web dan selamat coding!