Menggunakan font .otf di browser web

440

Saya sedang mengerjakan situs web yang membutuhkan uji font online, font yang saya miliki semuanya .otf

Apakah ada cara untuk menyematkan font dan membuatnya bekerja di semua browser?

Jika tidak, alternatif apa lagi yang saya miliki?

html css fonts font-face Naruto
sumber
1
Mungkin javascript harus dihapus dari daftar tag di sini?
kzh

Jawaban:

754

Anda dapat mengimplementasikan OTFfont Anda menggunakan @ font-face seperti:

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWeb.otf") format("opentype");
}

@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url("path/GraublauWebBold.otf") format("opentype");
}

Namun jika Anda ingin mendukung beragam browser modern, saya sarankan Anda untuk beralih ke WOFFdan TTFjenis font. WOFFtipe diimplementasikan oleh setiap browser desktop utama, sedangkan TTFtipe ini adalah fallback untuk browser Safari, Android, dan iOS yang lebih lama. Jika font Anda adalah font gratis, Anda dapat mengonversi font Anda menggunakan misalnya onlinefontconverter .

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype");
}

Jika Anda ingin mendukung hampir setiap browser yang masih ada di luar sana (tidak perlu lagi IMHO), Anda harus menambahkan beberapa jenis font seperti:

@font-face {
    font-family: GraublauWeb;
    src: url("webfont.eot"); /* IE9 Compat Modes */
    src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
         url("webfont.woff") format("woff"), /* Modern Browsers */
         url("webfont.ttf")  format("truetype"), /* Safari, Android, iOS */
         url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
}

Anda dapat membaca lebih lanjut tentang mengapa semua jenis ini diterapkan dan retasnya ada di sini . Untuk mendapatkan tampilan terperinci tentang jenis file mana yang didukung oleh browser mana, lihat:

@ font-face Dukungan Browser

Dukungan Browser EOT

Dukungan Browser WOFF

Dukungan Browser TTF

Dukungan Browser SVG-Font

semoga ini membantu

choise
sumber
1
Ini bekerja dengan sangat baik di hampir semua browser ... Satu-satunya browser yang tidak berfungsi adalah FireFox Linux ... Ada saran untuk itu ??
Naruto
3
Perhatikan bahwa jika Anda meng-hosting ini di server Windows, Anda harus menambahkan filetype .otf sebagai filetype yang valid dan disajikan. Satu-satunya cara untuk melihat bahwa ini adalah masalahnya adalah mengikuti tautan ke font (404 kesalahan jika demikian). Anda dapat mengganti nama sementara untuk .ttf atau bahkan .html untuk pengujian. Satu-satunya font web yang didukung oleh IE adalah format WOFF. (Tidak, tidak pernah mendengarnya juga!)
Henrik Erlandsson
Hei, bagaimana dengan kinerja font jenis ini? Apakah itu baik? Atau yang lain lebih baik?
Anggie Aziz
Apakah ada tanda kutip ( ") yang hilang dalam contoh kode?
steffen
2
Sepertinya OTF harus bekerja hampir di seluruh papan sekarang caniuse.com/#search=otf
Stephen
49

Dari contoh Google Font Directory :

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
}

Ini berfungsi lintas peramban dengan .ttf, saya percaya ini dapat bekerja dengan .otf ( Wikipedia mengatakan .otf sebagian besar kompatibel dengan .ttf) Jika tidak, Anda dapat mengonversi .otf ke .ttf

Berikut beberapa situs bagus:

kzh
sumber