Font Web CSS

Aturan @font-face CSS

Font Web memungkinkan desainer web menggunakan font yang belum terinstal di komputer pengguna.

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

Font 'pemilik' anda di CSS @font-face didefinisikan dalam aturan.

Format font yang berbeda

Font TrueType (TTF)

TrueType adalah standar font yang dikembangkan oleh Apple dan Microsoft pada akhir tahun 1980. TrueType adalah format font yang paling sering digunakan di sistem operasi Mac OS dan Microsoft Windows.

Font OpenType (OTF)

OpenType adalah format font komputer yang dapat diukur. Dibangun atas TrueType, dan adalah merek dagang Microsoft. Hari ini, font OpenType digunakan secara luas di platform komputer utama.

Format Font Terbuka Web (WOFF)

WOFF adalah format font untuk halaman web. Dikembangkan pada tahun 2009, saat ini WOFF telah menjadi standar rekomendasi W3C. WOFF secara dasar adalah OpenType atau TrueType yang memiliki kompresi dan metadata lainnya. Tujuannya adalah untuk mendukung penyebaran font dari server ke klien di jaringan dengan batas bandwith.

Format Font Terbuka Web (WOFF 2.0)

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

Font/Shape SVG

Font SVG memungkinkan SVG digunakan sebagai bentuk tulisan saat menampilkan teks. Spesifikasi SVG 1.1 mendefinisikan modul font, yang memungkinkan untuk membuat font di dokumen SVG. Anda juga dapat menerapkan CSS ke dokumen SVG, sambil aturan @font-face dapat diterapkan ke teks dalam dokumen SVG.

Font OpenType Embeddable (EOT)

Font EOT adalah bentuk yang disempit OpenType font yang dirancang Microsoft, digunakan sebagai font yang disematkan di halaman web.

Dukungan browser untuk format font

Angka di tabel menunjukkan versi browser pertama yang sepenuhnya mendukung format font ini.

Format font
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG Tidak didukung Tidak didukung Tidak didukung 3.2 Tidak didukung
EOT 6.0 Tidak didukung Tidak didukung Tidak didukung Tidak didukung

*IE:Format font ini hanya berlaku saat diatur menjadi "installable".

*Firefox:Secara default tidak didukung, tetapi dapat diaktifkan (perlu mengatur tanda menjadi "true" untuk menggunakan WOFF2).

Gunakan font yang Anda butuhkan

Dalam aturan @font-face: pertama tentukan nama font (contoh myFirstFont), kemudian arahkan ke file font.

Peringatan:URL font selalu menggunakan huruf kecil. Huruf besar mungkin menghasilkan hasil tak diharapkan di IE.

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

contoh

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

Coba sendiri

Gunakan teks tebal

Anda harus menambahkan aturan @font-face lain yang mengandung deskriptor teks tebal:

contoh

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

Coba sendiri

File "sansation_bold.woff" adalah file font lain yang mengandung karakter tebal font Sansation.

Ketika teks yang memiliki keluarga font "myFirstFont" harus ditampilkan dengan tebal, peramban akan menggunakannya.

Dengan cara ini, Anda dapat menetapkan banyak font untuk font yang sama. @font-face aturan.

aturan font CSS.

Tabel di bawah menunjukkan yang dapat digunakan dalam @font-face Semua deskriptor font (font descriptor) yang didefiniskan dalam aturan:

deskriptor nilai deskripsi
font-family name wajib. Tentukan nama font.
src URL wajib. Tentukan URL file font.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 可选。定义应如何拉伸字体。默认值是 "normal"。
font-style
  • normal
  • italic
  • oblique
 可选。定义字体的样式。默认值是 "normal"。
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 可选。定义字体的粗细。默认值是 "normal"。
unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认值是 "U+0-10FFFF"。