Jawaban:
Ya, Anda dapat menggunakan fitur CSS bernama @ font-face. Itu hanya secara resmi disetujui dalam CSS3, tetapi telah diusulkan dan diimplementasikan dalam CSS2 dan telah didukung di IE untuk waktu yang cukup lama.
Anda mendeklarasikannya di CSS seperti ini:
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}Kemudian, Anda bisa mereferensikannya seperti font standar lainnya:
h3 { font-family: Delicious, sans-serif; }Jadi, dalam hal ini,
<html>
<head>
<style>
@font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); }
h1 {
font-family: JuneBug
}
</style>
</head>
<body>
<h1>Hey, June</h1>
</body>
</html>Dan Anda hanya perlu meletakkan JUNEBUG.TFF di lokasi yang sama dengan file html.
Saya mengunduh font dari situs web dafont.com :
urladalah relatif ke tempat file css Anda berada.
Untuk dukungan browser terbaik, kode CSS Anda akan terlihat seperti ini:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}Untuk info lebih lanjut, lihat artikel Menggunakan @ font-face di CSS-tricks.com .
Anda dapat menggunakan @ font-face di sebagian besar browser modern.
Inilah beberapa artikel tentang cara kerjanya:
Berikut ini adalah sintaks yang baik untuk menambahkan font ke aplikasi Anda:
Berikut adalah beberapa tempat untuk mengonversi font untuk digunakan dengan @ font-face:
Juga cufon akan berfungsi jika Anda tidak ingin menggunakan font-face, dan memiliki dokumentasi yang bagus di situs web:
Coba ini
@font-face {
src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket {
font-family: Market Deco;
} <div class="FontMarket">KhonKaen Market</div>vilis.org
Jika Anda menggunakan style sheet eksternal, kode tersebut dapat terlihat seperti ini:
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }Dan harus disimpan dalam file .css yang terpisah (mis. Styles.css). Jika file .css Anda berada di lokasi yang terpisah dari kode halaman, file font yang sebenarnya harus memiliki jalur yang sama dengan file .css, BUKAN file halaman web .html atau .php. Maka halaman web membutuhkan sesuatu seperti:
<link rel="stylesheet" href="css/styles.css">di bagian <head> halaman html Anda. Dalam contoh ini, file font harus berada di folder css bersama dengan stylesheet. Setelah ini, cukup tambahkan class = "junebug" di dalam tag apa pun di html Anda untuk menggunakan font Junebug di elemen itu.
Jika Anda meletakkan css di halaman web yang sebenarnya, tambahkan tag gaya di kepala html seperti:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>Dan gaya elemen yang sebenarnya dapat dimasukkan di atas <style>dan dipanggil per elemen menurut kelas atau id, atau Anda bisa mendeklarasikan gaya sesuai dengan elemen. Maksud saya maksud <div>, <p>, <h1> atau elemen lain dalam html yang perlu menggunakan font Junebug. Dengan kedua opsi ini, file font (Junebug.ttf) harus berada di jalur yang sama dengan halaman html. Dari dua opsi ini, praktik terbaik akan terlihat seperti:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
</style>dan
<h1 class="junebug">This is Junebug</h1>Dan cara yang paling tidak dapat diterima adalah:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>dan
<h1 style="font-family: Junebug;">This is Junebug</h1>Alasan mengapa tidak baik untuk menggunakan gaya sebaris adalah praktik terbaik menentukan bahwa gaya harus disimpan semua di satu tempat sehingga pengeditan adalah praktis. Ini juga merupakan alasan utama yang saya sarankan untuk menggunakan opsi pertama menggunakan style sheet eksternal. Saya harap ini membantu.
ada cara sederhana untuk melakukan ini: di file html tambahkan:
<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />Catatan: Anda memasukkan nama file .ttf yang Anda miliki. lalu buka ke file css Anda dan tambahkan:
h1 {
color: blue;
font-family: vermin vibes;
}Catatan: Anda memasukkan nama keluarga font dari font yang Anda miliki.
Catatan: jangan tulis nama font-family sebagai font.ttf nama contoh Anda: jika font.ttf nama Anda adalah: "vermin_vibes.ttf" font-family Anda akan: "vermin vibes" keluarga font tidak mengandung karakter khusus sebagai "-, _" ... dll. hanya dapat berisi spasi.
font-facedalam CSS alih-alih membutuhkan file ttf.