Penggunaan font merupakan bagian integral dari desain web. Seringkali, kita ingin menggunakan font tertentu di halaman web, namun font tersebut bukan font bawaan sistem operasi mainstream, sehingga pengguna mungkin tidak melihat desain sebenarnya saat menelusuri halaman. Metode yang paling umum digunakan oleh desainer seni adalah mengubah teks yang diinginkan menjadi gambar. Metode ini memiliki beberapa kelemahan yang jelas: 1. Tidak mungkin menggunakan font dalam skala besar; 2. Konten gambar tidak mudah untuk dimodifikasi dibandingkan untuk menggunakan teks; 3. Tidak mudah untuk memodifikasi font. Kondusif untuk SEO situs web (mesin pencari arus utama tidak akan menggunakan konten alt gambar sebagai faktor efektif dalam menilai relevansi konten web). Ada beberapa metode yang menggunakan teknologi sIFR atau javascript/flash hack di Internet, namun metode tersebut rumit atau cacat untuk diterapkan. Yang akan saya bahas selanjutnya adalah cara menyematkan font apa pun di halaman web hanya melalui atribut @font-face di CSS.

langkah pertama

Dapatkan tiga format file font yang akan digunakan dan pastikan font tersebut dapat ditampilkan secara normal di browser mainstream.

• .TTF atau .OTF untuk Firefox 3.5, Safari, Opera
• .EOT, untuk Internet Explorer 4.0+
• .SVG untuk Chrome, IPhone

Hal berikutnya yang harus diselesaikan adalah bagaimana mendapatkan ketiga file berformat font tertentu. Umumnya, kami memiliki file format font tertentu (atau menemukannya di situs sumber daya desain), yang paling umum adalah file .TTF, dan kami perlu mengonversi format file ini ke dua format file lainnya. Konversi format file font dapat diperoleh melalui layanan konversi font online yang disediakan oleh website FontsQuirrel atau onlinefontconverter. Situs pertama direkomendasikan di sini, yang memungkinkan kita memilih karakter yang kita perlukan untuk menghasilkan file font (opsi terakhir dalam layanan), yang sangat mengurangi ukuran file font dan menjadikan solusi ini lebih praktis.

Langkah 2

Setelah mendapatkan file font dalam tiga format, langkah selanjutnya adalah mendeklarasikan font di style sheet dan menggunakan font tersebut jika diperlukan.

Deklarasi font adalah sebagai berikut:

@font-wajah {
font-family: 'fontNameRegular';
src: url('fontName.eot');
src: lokal('namafont Reguler'),
lokal('Namafont'),
url('namafont.woff') format('woff'),
url('namafont.ttf') format('tipe sebenarnya'),
url('namafont.svg#namafont') format('svg');
}
/*Ganti fontName dengan nama font Anda*/

Gunakan font jika diperlukan di halaman:

p { font: 13px fontNameRegular, Arial, sans-serif }
h1{font-keluarga: fontNameRegular}

atau

Memegang bulan di dalam air, aroma bunga berguguran memenuhi pakaian

Berikut adalah contoh apa yang saya lakukan melalui dua langkah di atas:

Jalankan kotak kode
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">



http://www.blueidea.com/articleimg/2009/12/7263/style.css " />

@font-wajah {
font-family: 'hakuyoxingshu7000Regular';
src: url('http://www.blueidea.com/articleimg/2009/12/7263/7000.eot');
src: lokal('hakuyoxingshu7000 Reguler'), lokal('hakuyoxingshu7000'), url('http://www.blueidea.com/articleimg/2009/12/7263/7000.ttf') format('truetype'), url('http://www.blueidea.com/articleimg/2009/12/7263/7000.svg#hakuyoxingshu7000') format('svg');
}
#puisi{
ukuran font:45px;
font-family:hakuyoxingshu7000Reguler;
perataan teks:tengah;
}
#puisi p{height:30px;line-height:30px;}