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.
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
<p style="font-family: fontNameRegular">Memegang bulan di dalam air, aroma bunga berguguran memenuhi pakaian</p>
Berikut adalah contoh apa yang saya lakukan melalui dua langkah di atas:
Jalankan kotak kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<title>Solusi lengkap untuk menyematkan font apa pun di halaman web - CSS9.NET</title>
<link rel="stylesheet" href=" http://www.blueidea.com/articleimg/2009/12/7263/style.css " />
<gaya tipe="teks/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;}
</gaya>
</kepala>
<tubuh>
<div id="tesdiv">
<h1>Solusi lengkap untuk menyematkan font apa pun di halaman web - CSS9.NET</h1>
<h2>Kunjungi teks asli: <a href=" http://css9.net/css-font-face-solution/">http://css9.net/css-font-face-solution/</a >  ;   ;Fokus pada pengembangan front-end Web- <a href=" http://css9.net">CSS9.NET</a></h2 >
<div id="puisi">
<h3>Yunwei adalah seorang vegetarian</h3>
<p>Ada teman sekelas di Beijing dan kami bertemu di restoran vegetarian. </p><p>Pendengar belum selesai berbicara, namun pembicara sudah terlalu banyak bicara. </p><p>Rumah itu penuh dengan teman-teman yang berbicara bebas tentang He Minke. </p><p>Kirim kata-kata kecil dalam Zen, ucapkan dengan hati-hati dan lembut. </p>
</div>
</tubuh>
</html>
[Ctrl+A Pilih Semua Tip: Anda dapat memodifikasi sebagian kode terlebih dahulu lalu tekan Jalankan]
Font pada artikel di atas menggunakan font kursif pena yang telah dirilis sebelumnya di blog ini.
Unduh kode sumber untuk contoh ini: Contoh Font Web Embed
Teks asli: http://css9.net/css-font-face-solution/