Penggunaan font adalah bagian yang sangat diperlukan dari desain web. Seringkali, kami ingin menggunakan font tertentu di halaman web, tetapi font ini bukan font bawaan untuk sistem operasi utama, sehingga pengguna mungkin tidak dapat melihat desain yang sebenarnya saat menjelajahi halaman. Cara yang paling umum untuk dilakukan oleh perancang seni adalah membuat teks yang diinginkan menjadi gambar Tidak ada yang menguntungkan untuk SEO situs web (mesin pencari arus utama tidak akan menggunakan konten alt gambar sebagai faktor yang efektif dalam menilai relevansi konten halaman web). Ada beberapa metode di internet yang menggunakan teknologi SIFR atau javascript/flash hack, tetapi implementasinya rumit atau cacat. Apa yang ingin kami bicarakan di bawah ini adalah cara menyematkan font apa pun di halaman web hanya melalui atribut @font-wajah CSS.
Langkah pertama
Dapatkan tiga format file untuk menggunakan font untuk memastikan bahwa font dapat ditampilkan secara normal di browser arus utama.
.Ttf atau .otf, cocok untuk Firefox 3.5, Safari, Opera
.Eot, untuk Internet Explorer 4.0+
.Svg, cocok untuk chrome, iPhone
Yang ingin kami selesaikan di bawah ini adalah cara mendapatkan ketiga file format ini dari font tertentu. Secara umum, kami memiliki beberapa file format untuk font yang ada (atau sudah ditemukan di situs sumber daya desain), yang paling umum adalah file .ttf, yang perlu kami konversi ke dua format file yang tersisa melalui format file ini. Konversi format file font dapat diperoleh melalui layanan konversi font online yang disediakan oleh situs web fontsquirrel atau onLeLeFontConverter. Situs pertama direkomendasikan di sini, yang memungkinkan kami memilih karakter yang diperlukan untuk menghasilkan file font (opsi terakhir dari layanan), yang sangat mengurangi ukuran file font dan membuat solusi ini lebih praktis.
Langkah 2
Setelah mendapatkan file font dalam tiga format, langkah selanjutnya adalah mendeklarasikan font dalam lembar gaya dan menggunakan font di mana diperlukan.
Deklarasi font adalah sebagai berikut:
@font-face {
Font-family: 'fontnameregular';
src: url ('fontname.eot');
SRC: Lokal ('FontName Reguler'),
lokal ('fontname'),
format url ('fontname.woff') ('woff'),
format url ('fontname.ttf') ('truetype'),
url ('fontname.svg#fontname') format ('svg');
}
/* di mana fontName diganti dengan nama font Anda*/
Gunakan font ini di mana Anda membutuhkannya di halaman:
p {font: 13px fontnameregular, Arial, sans-serif;
h1 {font-family: fontnameregular}
atau
<p style = "font-family: fontnameregular"> meringkuk bulan di tangan Anda, dan aroma bunga yang jatuh memenuhi pakaian Anda </p>
Berikut adalah contoh yang saya lakukan melalui dua langkah di atas:
Jalankan kotak kode
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> Solusi Lengkap untuk Menyematkan Font di Halaman Web - CSS9.NET </iteme>
<tautan rel = "stylesheet" href = "http://www.blueidea.com/articleimg/2009/12/7263/style.css"/>
<type style = "text/css">
@font-face {
Font-Family: 'Hakuyoxingshu7000 Regular';
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: Hakuyoxingshu7000 Regular;
Teks-Align: tengah;
}
#poem p {height: 30px; line-height: 30px;}
</tyle>
</head>
<body>
<Div id = "testDiv">
<h1> Solusi lengkap untuk menanamkan font apa pun di halaman web - css9.net </h1>
<h2> mengakses teks asli: <a href = "http://css9 > & nbsp; & nbsp; & nbsp; Ikuti pengembangan front-end web- <a href = "http://css9.net"> css9.net </a> </h2>
<Div id = "puisi">
<h3> Cloud adalah vegetarian </h3>
<p> Ada teman sekelas di ibukota, dan kami bertemu di paviliun vegetarian. </p> <p> Pendengar masih belum selesai, tetapi orang yang berbicara telah banyak berbicara. </p> <p> Ada teman di seluruh ruangan, dan saya akan berbicara tentang ilmu sipil. </p> <p> Kirim kata -kata kecil di zen, hati -hati dan lembut. </p>
</div>
</body>
</html>
[Ctrl+A All Selection Tips: Anda dapat memodifikasi beberapa kode terlebih dahulu, dan kemudian tekan Run]
Font dalam artikel di atas menggunakan font skrip pena Fountain yang diterbitkan oleh blog ini.
Unduh Kode Sumber untuk Contoh Ini: Contoh Font Halaman Web
Teks Asli: http://css9.net/csss-font-face-solution/