Cara menggunakan font html

Question

Oiya sobat, sebelum kita menggunakan font eksternal, terlebih dahulu kita harus mengetahui jenis-jenis format font yang didukung oleh browser

Table of Contents Show

Format dan Jenis Font CSS
EOT (Jenis Terbuka Tertanam)
TTF (Tipe Sejati) dan OTF (Tipe Terbuka)
SVG (Grafik Vektor yang Dapat Diskalakan)
WOFF (Format Font Web Terbuka)
Tutorial Cara Menggunakan Font Eksternal CSS
Mengatasi Keterbatasan Dukungan Format Font
Setiap font HTML?
Apa keluarga font css?
Bagaimana cara mengubah font elemen css?
Jenis huruf apa?

Format dan Jenis Font CSS

Perlu diketahui, tidak semua orang di Internet menggunakan browser yang sama, mereka menggunakan berbagai macam browser yang berbeda, mulai dari Internet Explorer, Google Chrome, Firefox, Microsoft Edge, UC Browser, dan lain-lain. Beberapa di antaranya mungkin sulit menggunakan font eksternal

Nah berikut ini adalah Jenis Format Font yang bisa digunakan untuk Browser

EOT (Jenis Terbuka Tertanam)

EOT adalah format font yang hanya didukung oleh Internet Explorer, dan relatif jarang digunakan. Untuk dapat mengubah format font menjadi EOT, kita memerlukan aplikasi khusus seperti yang disediakan di situs www. fontsquirrel. com atau https. //semuanyafont. com

TTF (Tipe Sejati) dan OTF (Tipe Terbuka)

Format ini biasanya ditemukan di Sistem Operasi kami, kebanyakan dari mereka memiliki ekstensi. ttf atau. otf. Kedua format ini adalah font yang paling banyak digunakan, dan juga mendukung banyak browser

SVG (Grafik Vektor yang Dapat Diskalakan)

Format ekstensi. svg bukanlah format khusus untuk font, melainkan format yang biasa digunakan untuk gambar vektor (gambar yang tidak berubah/tidak merusak kualitasnya saat diperbesar). Beberapa browser tidak mendukung format ini

Tapi sobat bisa menggunakannya, ada beberapa referensi yang sudah tersedia di google. com tentang ini. Atau mungkin suatu saat kita akan membahasnya bersama

WOFF (Format Font Web Terbuka)

Format font WOFF adalah jenis format terbaru dan dirancang khusus untuk kebutuhan web. WOFF pada dasarnya adalah versi terkompresi dari format TTF dan OTF. WOFF memiliki ukuran yang lebih kecil dan akan mengunduh lebih cepat.

WOFF didukung oleh browser web seperti. IE 9 dan yang lebih baru, Firefox, Chrome, Safari, Opera, browser Blackberry, dan iOS Safari versi 5 dan yang lebih baru.

Namun yang perlu diperhatikan adalah Android. Dengan kata lain, jika Anda menggunakan format WOFF, browser web di Android dan IE 8 ke bawah tidak akan dapat mengaksesnya.

Tutorial Cara Menggunakan Font Eksternal CSS

Nah, teman-teman sudah masuk ke bagian tutorial. Ada yang harus kalian persiapkan yaitu External Font yang akan kita gunakan di CSS nanti

Untuk mendapatkan External Fonts, anda bisa mendapatkannya di perangkat lokal anda atau anda bisa mendownloadnya di google

Jika sobat sudah mendapatkan font tersebut, silahkan copy pastekan ke folder project training sobat. Seperti ini

Jika sobat sudah pernah membuatnya di dalam folder, maka kita akan langsung mencoba membuatnya

Berikut ini adalah contoh sintaks html dan css yang telah saya buat

HTML

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Latihan Font CSS</title>
 </head>
 <body>
  <div>
   <h1>Belajar Font External Di CSS</h1>
   <p>
    Hai Semua, Halo Teman Teman , Bagaimana Keadaan Teman Teman Semua? Semoga Baik Baik saja yah. Oke pada Kesempatan ini, kita akan memasuki Materi Selanjutnya dari HTML, yaitu CSS. Ingin mengetahui apa itu CSS lebih lengkap? Mari kita jelajahi di Blog Ini!
   </p>
  </div>
 </body>
</html>

CSS

@font-face {
 font-family: Droid;
 src:url(Purisa.ttf);
}
p {
 font-family: Droid;
}

Yang kita hasilkan dari syntax diatas adalah seperti ini

Pelajari Font Eksternal CSS

Perhatikan sintaks CSS

@font-face {
 font-family: Droid;
 src:url(Purisa.ttf);
}
p {
 font-family: Droid;
}

Pada bagian font-family , memiliki nama Droid. Nah, namanya terserah teman yang memberi nama.
Pada bagian src isikan alamat file font yang sudah anda tempatkan tadi, nama harus sama dengan font nama file.

Mengatasi Keterbatasan Dukungan Format Font

Seperti yang telah kita bahas di atas, beberapa browser tidak mendukung format font yang tercantum di atas, seperti. ttf dan lain-lain, maka dari itu mau tidak mau kita harus menggunakan css tambahan, berikut sintaknya

@font-face {
 font-family: Droid;
 src:url(Purisa.ttf);
 src:
  url('Purisa.eot?#iefix') format('embedded-opentype'),
  url('Purisa.woff') format('woff'),
  url('Purisa.ttf') format('truetype'),
  url('Purisa.svg') format('svg');
}
p {
 font-family: Droid;
}

_

Nah jika kalian harus melakukan itu, maka kalian dapat mengonversinya di https. //semuanyafont. com/ atau bisa juga di http. // www. fontsquirrel. com/tools/webfont-generator

Setiap font HTML?

Mari kita tinjau 20 font terbaik untuk font HTML. .

Arial. Arial adalah font yang paling banyak digunakan untuk media online dan cetak. .

2. zaman Romawi Baru. Times New Roman adalah variasi dari font Times lama yang juga berasal dari grup Serif. .

3. Helvetica. .

4. Waktu. .

Kurir Baru. .

6. beranda. .

7. Kurir. .

Arial Sempit

Apa keluarga font css?

Secara umum ada lima jenis font family. .

Sans Serif – Font tanpa tanduk;

Serif – Font yang memiliki tanduk di ujungnya;

Monospace – Font dengan ukuran spasi yang sama;

Cursive – Font seperti tulisan tangan;

Fantasi – Font dengan bentuk yang menarik

Bagaimana cara mengubah font elemen css?

untuk merubah atau mengganti font dengan css sobat bisa menggunakan property 'font-family'. kemudian pada value masukkan nama font yang ingin digunakan .

Jenis huruf apa?

Apa itu Font Keluarga ? . Jenis yang dimaksud adalah miring, normal, tebal, atau serupa dalam Family font atau dapat disebut keluarga font adalah suatu kelompok tipografi yang memiliki kesamaan pola namun juga berbeda gaya dalam beberapa tipe. Adapun tipe yang dimaksud adalah gaya miring, normal, tebal, atau semacamnya pada suatu font .

kode html