Mengenal CSS Web Fonts Dengan Lengkap

CSS

Aturan CSS @ font-face.

Font web memungkinkan desainer Web untuk menggunakan font yang tidak diinstal pada komputer pengguna.

Ketika Anda menemukan / membeli font yang ingin Anda gunakan, cukup sertakan file font di server web Anda, dan itu akan secara otomatis diunduh ke pengguna saat diperlukan.

Font "sendiri" Anda didefinisikan dalam aturan CSS @ font-face.

Format Font yang berbeda

TrueType Fonts (TTF)

TrueType adalah standar font yang dikembangkan pada akhir 1980-an, oleh Apple dan Microsoft. TrueType adalah format font yang paling umum untuk sistem operasi Mac OS dan Microsoft Windows.

OpenType Fonts (OTF)

OpenType adalah format untuk font komputer scalable. Ini dibangun di TrueType, dan merupakan merek dagang terdaftar dari Microsoft. Font OpenType digunakan umumnya hari ini di platform komputer utama.

Format Font Buka Web (WOFF)

WOFF adalah format font untuk digunakan di halaman web. Ini dikembangkan pada tahun 2009, dan sekarang menjadi Rekomendasi W3C. WOFF pada dasarnya adalah OpenType atau TrueType dengan kompresi dan metadata tambahan. Tujuannya adalah untuk mendukung distribusi font dari server ke klien melalui jaringan dengan batasan bandwidth.

Format Font Buka Web (WOFF 2.0)

Font TrueType / OpenType yang menyediakan kompresi lebih baik daripada WOFF 1.0.

SVG Fonts / Shapes

Font SVG memungkinkan SVG digunakan sebagai mesin terbang saat menampilkan teks. Spesifikasi SVG 1.1 mendefinisikan modul font yang memungkinkan pembuatan font dalam dokumen SVG. Anda juga dapat menerapkan CSS ke dokumen SVG, dan aturan @ font-face dapat diterapkan ke teks dalam dokumen SVG.

Font OpenType Tertanam (EOT)

EOT font adalah bentuk ringkas dari font OpenType yang dirancang oleh Microsoft untuk digunakan sebagai font tertanam pada halaman web.

Dukungan Browser untuk Format Font

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung format font.

* IE: Format font hanya berfungsi ketika diatur menjadi "diinstal".

* Firefox: Tidak didukung secara default, tetapi dapat diaktifkan (perlu mengatur bendera ke "true" untuk menggunakan WOFF2).

Menggunakan Font yang Anda Inginkan

Dalam aturan @font-face; pertama-tama tentukan nama untuk font (misalnya myFirstFont) dan kemudian arahkan ke file font.

Tips: Selalu gunakan huruf kecil untuk URL font. Huruf besar dapat memberikan hasil yang tidak terduga di IE.

Untuk menggunakan font untuk elemen HTML, lihat nama font (myFirstFont) melalui properti font-family:

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

div {
    font-family: myFirstFont;
}

Menggunakan Teks Tebal

Anda harus menambahkan aturan @font-face lain yang berisi pendeskripsi untuk teks tebal:

@font-face {
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight: bold;
}

File "sansation_bold.woff" adalah file font lain, yang berisi karakter tebal untuk font Sansasi. Peramban akan menggunakan ini setiap kali sebuah teks dengan font-family "myFirstFont" harus dirender sebagai tebal. Dengan cara ini Anda dapat memiliki banyak aturan @ font-face untuk font yang sama.

Artikel Terkait

Populer

;