Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS Latar Belakang CSS Batas CSS Margin CSS Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS Teks CSS Font CSS Ikon CSS Tautan CSS Daftar CSS Tabel CSS Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS Bayangan CSS Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

Font Web CSS


Aturan CSS @font-face

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

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

Font "milik" Anda ditentukan dalam @font-faceaturan CSS.


Format Font Berbeda

Font TrueType (TTF)

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

Font Tipe Terbuka (OTF)

OpenType adalah format untuk font komputer yang dapat diskalakan. Itu dibangun di atas TrueType, dan merupakan merek dagang terdaftar dari Microsoft. Font OpenType digunakan secara umum saat ini di platform komputer utama.

Format Font Terbuka 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 Terbuka Web (WOFF 2.0)

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

Font/Bentuk SVG

Font SVG memungkinkan SVG untuk 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)

Font EOT adalah bentuk kompak dari font OpenType yang dirancang oleh Microsoft untuk digunakan sebagai font yang disematkan pada halaman web.



Dukungan Browser untuk Format Font

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

Font format
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 Not supported Not supported Not supported 3.2 Not supported
EOT 6.0 Not supported Not supported Not supported Not supported

*IE: Format font hanya berfungsi jika diatur ke "dapat diinstal".


Menggunakan Font yang Anda Inginkan

Dalam @font-faceaturan; pertama-tama tentukan nama untuk font (mis. myFirstFont) dan kemudian arahkan ke file font.

Tip: 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 font-familyproperti:

Contoh

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

div {
  font-family: myFirstFont;
}

Menggunakan Teks Tebal

Anda harus menambahkan @font-faceaturan lain yang berisi deskriptor untuk teks tebal:

Contoh

@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 Sansation.

Peramban akan menggunakan ini setiap kali sepotong teks dengan font-family "myFirstFont" harus dicetak tebal.

Dengan cara ini Anda dapat memiliki banyak @font-faceaturan untuk font yang sama.


Uji Diri Anda Dengan Latihan

Olahraga:

Tambahkan font web dengan nama "sansation" dan URL "sansation_light.woff".

<style>
 {
  font-family: ;
  : ;
}

body {
  font-family: sansation;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>


Deskriptor Font CSS

Tabel berikut mencantumkan semua deskriptor font yang dapat ditentukan di dalam @font-faceaturan:

Descriptor Values Description
font-family name Required. Defines a name for the font
src URL Required. Defines the URL of the font file
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Optional. Defines how the font should be stretched. Default is "normal"
font-style normal
italic
oblique
Optional. Defines how the font should be styled. Default is "normal"
font-weight normal
bold
100
200
300
400
500
600
700
800
900
Optional. Defines the boldness of the font. Default is "normal"
unicode-range unicode-range Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF"