Bagaimana cara menginstal font khusus di situs HTML

153

Saya tidak menggunakan flash atau php - dan saya diminta untuk menambahkan font khusus ke tata letak HTML sederhana. "KG Juni Bug"

Saya sudah mengunduh secara lokal - apakah ada trik CSS sederhana untuk mencapai ini?

html css fonts webfonts adam
sumber

Jawaban:

276

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 :

http://www.dafont.com/junebug.font

Nicolas Modrzyk
sumber
1
maaf jika ini "pekerjaan rumah" seperti apa kode itu jika saya menggunakan font JUNEBUG ini hanya untuk teks biasa
adam
Saya tidak tahu Anda bisa melakukan itu. Apakah itu berfungsi di browser lain juga?
Julien Bourdon
1
Bekerja di peramban apa pun yang layak: webfonts.info/wiki/index.php?title=@font-face_browser_support
Nicolas Modrzyk
Tidak berfungsi untuk saya, font saya ada di folder yang sama dengan halaman php saya.
Hitam
1
@ Jalur hitam yang ditentukan dalam urladalah relatif ke tempat file css Anda berada.
Alex Semeniuk
17

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 .

John Slegers
sumber
17

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:

nheinrich
sumber
9

Coba ini

@font-face {  
    src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket { 
    font-family:  Market Deco;
}
 <div class="FontMarket">KhonKaen Market</div>
Luaskan cuplikan

vilis.org

SIAMWEBSITE
sumber
4

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.

Richard Stitz
sumber
-1

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.

Abbass Sharara
sumber
Anda harus benar-benar mendefinisikannya sebagai font-facedalam CSS alih-alih membutuhkan file ttf.
Arcath
tidak perlu melakukannya sehingga Anda bisa melakukannya seperti ini. Saya selalu melakukannya dalam dua cara dan keduanya bekerja
Abbass Sharara
@ Arc mengapa lebih baik menggunakan font-face?
Antonio Araujo