CSS @ font-face tidak bekerja dengan Firefox, tetapi bekerja dengan Chrome dan IE


194

Kode berikut berfungsi di Google Chrome beta dan juga IE 7. Namun, Firefox tampaknya memiliki masalah dengan ini. Saya menduga itu menjadi masalah bagaimana file CSS saya dimasukkan, karena saya tahu Firefox tidak terlalu ramah tentang impor lintas domain.

Tapi ini semua hanya HTML statis dan tidak ada pertanyaan tentang cross-domain.

Di halaman arahan saya.html saya melakukan impor CSS seperti:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

Di dalam main.css saya memiliki impor lain seperti:

@import url("reset.css");
@import url("style.css");
@import url("type.css");

dan dalam type.css saya memiliki deklarasi berikut:

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"), 
                url("font/droidserif-regular-webfont.woff") format("woff"), 
                url("font/droidserif-regular-webfont.ttf")     format("truetype"), 
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg"); 
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), 
        url("font/droidserif-bold-webfont.woff") format("woff"), 
        url("font/droidserif-bold-webfont.ttf") format("truetype"), 
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }

body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

Saya memiliki direktori bernama "font" di lokasi yang sama dengan type.css. Direktori font ini berisi semua file woff / ttf / svg dll.

Saya bingung tentang yang satu ini. Ini bekerja di Chrome dan IE tetapi tidak di Firefox . Bagaimana ini mungkin? Apa yang saya lewatkan?


2
Saya mengalami masalah ini dengan FontSquirrel yang menghasilkan arahan dan font saat ini.
jason

untuk tujuan pengujian dapatkah Anda mencoba menambahkan deklarasi @ font-face ke html Anda di antara <style>tag dan melihat apakah Anda memiliki masalah yang sama?
Chris_O

menambahkan satu koma dapat mengatasi masalah ini juga, seperti: format url ('Sans-serif') ('woff')
Farzan Balkani

Jawaban:


234

LOKAL MENJALANKAN SITUS ( file:///)

Firefox memiliki kebijakan "file uri origin" ( file:///) yang sangat ketat : untuk membuatnya berperilaku seperti browser lain, buka about:config, filter dengan, fileuridan alihkan preferensi berikut:

security.fileuri.strict_origin_policy

Setel ke false dan Anda harus dapat memuat sumber daya font lokal di berbagai level jalur.

SITUS DITERBITKAN

Seperti komentar saya di bawah ini, dan Anda mengalami masalah ini setelah menggunakan situs Anda, Anda dapat mencoba menambahkan header tambahan untuk melihat apakah masalah Anda mengonfigurasikan dirinya sebagai masalah lintas domain: seharusnya tidak, karena Anda menentukan jalur relatif, tetapi saya tetap akan mencobanya: di file .htaccess Anda, tentukan Anda ingin mengirim header tambahan untuk setiap file .ttf / .otf / .eot yang diminta:

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Terus terang, saya tidak akan berharap itu membuat perbedaan, tetapi sangat sederhana itu layak untuk dicoba: kalau tidak coba gunakan pengkodean base64 untuk jenis huruf font Anda, jelek tapi mungkin berfungsi juga.

Rekap yang bagus tersedia di sini


Jika Anda tidak bekerja secara lokal, maka ini mungkin tidak akan menyelesaikannya, tetapi Anda mungkin ingin menggunakan jalur berbasis root di situs langsung, yaitu, "/ resources / font" bukan yang relatif seperti "../ font ", tetapi saya tidak tahu tentang thumblr: jika Anda bisa memberikan url untuk situs saya bisa melihatnya.
Manuel

Deklarasi font berfungsi dengan baik di Chrome, Safari, bahkan semua cara mereka kembali ke IE6 ... tetapi tidak firefox.
jason

3
Ah Anda berbicara tentang masalah lintas domain yang terkenal: Anda bisa menggunakan font Anda dalam pengkodean base64, atau meminta thumblr untuk menambahkan header "Access-Control-Allow-Origin" tambahan saat menyajikan font.
Manuel

Lalu seberapa ketat kebijakan lintas domain Firefox? Seperti, CDN dan situs berbagi domain yang sama, hanya subdomain yang berbeda.
jason

1
@ alasan, encoding 64 bit yang berantakan tidak bekerja baik? Ini berhasil untuk saya.
Kaushik Gopal

42

Selain menambahkan berikut ini ke .htaccess Anda: (terima kasih @Manuel)

<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Anda mungkin ingin mencoba menambahkan secara eksplisit tipe webfont mime ke file .htaccess ... seperti ini:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

Pada akhirnya, file .htaccess saya terlihat seperti ini (untuk bagian yang memungkinkan webfonts bekerja di semua browser)

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

# END REQUIRED FOR WEBFONTS

Bekerja untuk saya juga. Terima kasih zoulodi!
James

Bekerja untukku seperti pesona! Terima kasih
Moxet Jan

1
Melakukan trik untuk saya juga. Saya harus menambahkan woff2 juga: AddType font / woff2 .woff2
hdomos

17

Saya punya masalah ini juga. Saya menemukan jawabannya di sini: http://www.dynamicdrive.com/forums/showthread.php?t=63628

Ini adalah contoh dari solusi yang bekerja pada firefox, Anda perlu menambahkan baris ini ke font wajah css:

src: local(font name), url("font_name.ttf");

3
Memasukkan local('name')dalam font-facedeklarasi hanya berarti "mencoba memuat font 'nama' di komputer pengguna. Jika tidak ditemukan, muat webfont." (lihat dokumen MDN ). Namun, senang itu berhasil untuk Anda! :)
henry

4
Ini berfungsi "Untuk Anda" karena Anda memasang font di komputer Anda. Pengguna lain tidak akan melihatnya. Anda memperbaikinya hanya untuk Anda.
Hugo Delsing

4

Saya hanya akan meninggalkan ini di sini karena rekan kerja saya menemukan solusi untuk masalah "font-face yang tidak bekerja pada firefox tetapi di tempat lain" masalah.

Masalahnya hanya Firefox yang mengacaukan deklarasi font-family, ini akhirnya memperbaikinya:

body{ font-family:"MyFont" !important; }

PS: Saya juga menggunakan html5boilerplate.


4

Saya mengalami masalah yang sama. Periksa kode Anda untuk H1, H2 atau gaya apa pun yang Anda targetkan dengan aturan @ font-face. Saya menemukan saya kehilangan koma setelah font-family: 'custom-font-family' Arial, Helvetica etcitu muncul dengan baik di setiap browser selain dari Firefox. Saya menambahkan koma dan berhasil.


4

Saya memiliki masalah yang persis sama. Saya harus membuat folder baru yang disebut "font" dan meletakkannya di wp_content. Saya dapat mengaksesnya dari browser saya seperti ini http://www.example.com/wp-content/fonts/CANDY.otf

Sebelumnya, folder font berada di direktori yang sama dengan file CSS saya, dan @ font-face tampak seperti ini:

@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

Seperti yang saya sebutkan di atas, ini tidak berfungsi di Firefox tetapi hanya dengan Chrome. Sekarang ini berfungsi karena saya menggunakan jalur absolut:

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}

3

Saya punya masalah persis ini menjalankan ff4 di mac. Saya menjalankan server pengembangan lokal dan deklarasi @ font-face saya berfungsi dengan baik. Saya pindah ke live dan FF akan 'mem-flash' jenis yang benar pada halaman pertama, tetapi ketika menavigasi lebih dalam, jenis huruf default ke stylesheet browser.

Saya menemukan solusinya dengan menambahkan deklarasi berikut ke .htaccess

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

ditemukan via


3

Salah satu solusi mudah yang belum ada yang disebutkan adalah menanamkan font langsung ke file css menggunakan pengkodean base64.

Jika Anda menggunakan fontsquirrel.com, di Generator Kit font-face pilih mode ahli , gulir ke bawah dan pilih Base64 Encode di bawah Pilihan CSS - Font-Kit yang diunduh akan siap untuk plug and play.

Ini juga memiliki manfaat pinggiran mengurangi waktu buka halaman karena memerlukan satu permintaan http kurang.


2
komentar pada solusi yang dipilih tidak menyebutkan solusi encode base64.
Kaushik Gopal

@ KaushikGopal Saya pikir jawabannya pasti sudah diedit setelah saya memposting ini.
Pierre

3

Saya akan menyebutkan bahwa beberapa font memiliki masalah di firefox jika nama file mereka mengandung karakter tertentu. Saya baru-baru ini mengalami masalah dengan font 'Modulus' yang memiliki nama file '237D7B_0_0'. Menghapus garis bawah pada nama file dan memperbarui css agar sesuai dengan nama file baru menyelesaikan masalah ini. Font lain dengan karakter yang mirip tidak memiliki masalah ini yang sangat aneh ... mungkin bug di firefox. Saya akan merekomendasikan menyimpan nama file hanya untuk karakter alfanumerik.


INI. MyFonts.com memuntahkan file font mereka dengan nama ini dan itu menghasilkan Firefox 35 rendering dalam segala macam cara aneh. Mengganti nama font memecahkan masalah.
coreyward

2

Untuk font ini khususnya Anda harus menggunakan Google Font API:

http://code.google.com/webfonts/family?family=Droid+Sans

Jika Anda masih ingin menggunakan generator kit FontSquirrel, gunakan opsi peretasan Smiley untuk menghilangkan masalah font lokal. Setelah Anda membuat kit, periksa bahwa demo.html yang dihasilkan berfungsi di FireFox. Aku yakin itu terjadi. Sekarang unggah ke server Anda - saya yakin itu bekerja di sana juga karena FontSquirrel mengagumkan.

Namun, jika Anda memecahkan kode kit yang dihasilkan saat mengintegrasikannya ke dalam proyek Anda, gunakan metode standar debugging - periksa 404 dan mulai baris demi baris sampai Anda menemukan masalah. WOFF pasti bekerja di FF, jadi itu tempat yang bagus untuk memulai.

Akhirnya, jika tidak ada yang berhasil, perbarui FireFox. Saya menulis semua ini dengan asumsi bahwa Anda menggunakan yang terbaru; tetapi Anda tidak menentukan versi apa yang Anda periksa, sehingga itu bisa menjadi masalah Anda juga.


Sebenarnya Anda tidak harus menggunakan Google Font API untuk ini. Ada masalah dengan Firefox yang mencegah varian font (miring, tebal, dll) untuk digunakan jika Anda menginstal font secara lokal. Satu-satunya cara saya menemukan nerf adalah deklarasi src lokal dengan smiley (tentu saja, setiap karakter aneh akan melakukannya, hanya saja ... senang).
jason


2

Coba baca pernyataan sumber lokal di @font-facearahan Anda .

Ada bug yang diketahui di Firefox atau Google Font API yang mencegah varian font untuk digunakan jika font diinstal secara lokal, dan cocok dengan nama lokal yang ditentukan:

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

Agar nerf deklarasi lokal secara efektif, buat saja string sumber lokal Anda omong kosong. Konvensi yang berlaku umum untuk ini adalah menggunakan karakter unicode smiley ( "☺"). Mengapa? Paul Irish memiliki penjelasan yang bagus di blognya:

http://paulirish.com/2010/font-face-gotchas/#smiley


Tidak tahu PaulI datang dengan metode peluru baru, harus mencoba yang ini dan melihat apakah itu memecahkan masalah font-FF saya.
Kaushik Gopal

[Pembaruan: Sambil membantu, itu tidak menyelesaikan masalah]. Saya memang diarahkan ke solusi yang tepat.
Kaushik Gopal

1

Apakah Anda menguji ini dalam file lokal atau dari server Web? File dalam direktori yang berbeda dianggap sebagai domain yang berbeda untuk aturan lintas-domain, jadi jika Anda menguji secara lokal, Anda mungkin mendapatkan batasan lintas-domain.

Kalau tidak, mungkin akan membantu untuk diarahkan ke URL di mana masalah terjadi.

Juga, saya sarankan melihat konsol kesalahan Firefox untuk melihat apakah ada kesalahan sintaksis CSS atau kesalahan lain yang dilaporkan.

Juga, saya perhatikan Anda mungkin ingin font-weight: bold pada aturan @ font-face kedua.


Hmm .. ya David, sepertinya saya menjalankannya secara lokal, tetapi sebelumnya saya memiliki subdirektori dengan direktori yang sama. Jadi type.css saya terletak di folder root dan di tempat yang sama terletak folder font. jadi type.css dan folder font berada di direktori yang sama. Agar aman, saya juga mencoba menghapusnya dari direktori dan langsung menempatkan font. Itu masih tidak berfungsi pada firefox.
Kaushik Gopal

Saya sekarang mulai merasa itu salah satu dari dua: 1) ada sesuatu yang salah dalam pengkodean saya, jika ada yang melihat sesuatu dari kode di atas, mohon berbaik hati untuk menunjukkannya. 2) FF tidak memperlakukan @ font-face dan banyak impor file dengan baik? Saya menggunakan main.css yang inturn mengimpor @import type.css yang pada gilirannya memiliki tautan folder ke font? Adakah orang yang ringan? Btw, terima kasih atas tangkapan font-weight @David!
Kaushik Gopal

Firefox menangani beberapa impor dengan baik. Versi apa yang Anda gunakan? Debug kode menggunakan FireBug; gunakan proses eliminasi. Bekerja secara lokal menimbulkan masalah yang mungkin bisa dihilangkan dari jarak jauh. Inilah cara Anda melakukan debug!
Casey

"File dalam direktori yang berbeda dianggap domain yang berbeda untuk aturan lintas-domain" - tidak, tidak.
Mike Chamberlain

1

Menggunakan aturan .htaccess Access Control Allow Origin tidak berfungsi untuk saya ketika saya dihadapkan dengan masalah ini.

Sebaliknya, di IIS di web.config masukkan blok system.webServer yang ditunjukkan di bawah ini.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

Ini bekerja seperti pesona bagi saya. Jika Anda perlu membatasi akses ke domain tertentu, ganti * dengan domain.


1

Saya mengalami masalah yang sama untuk mendapatkan font untuk ditampilkan dengan benar di Firefox. Inilah yang saya temukan bekerja untuk saya. Tambahkan garis miring sebelum direktori menahan font di atribut url. Ini versi saya sebelum dan sesudah:

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

perhatikan garis miring sebelum 'font' di url? Ini memberi tahu browser untuk memulai di direktori root dan kemudian mengakses sumber. Setidaknya bagi saya - Soal Dipecahkan.


1

Jika Anda mencoba mengimpor font eksternal, Anda menghadapi salah satu masalah paling umum dengan Firefox dan peramban lainnya. Beberapa saat font Anda berfungsi baik di Google Chrome atau salah satu browser lain tetapi tidak di setiap browser.

Ada banyak alasan untuk jenis kesalahan ini. Salah satu alasan terbesar di balik masalah ini adalah font yang ditentukan sebelumnya. Anda perlu menambahkan kata kunci penting setelah akhir setiap baris kode CSS Anda seperti di bawah ini:

Contoh:

@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}

Deskripsi: Masukkan kode di atas dalam file CSS Anda atau kode di sini. Dalam contoh di atas, ganti "Hacen Arab Saudi" dengan font-family Anda dan ganti url sesuai direktori font Anda.

Jika Anda memasukkan! Penting dalam browser kode css Anda secara otomatis fokus pada bagian ini dan menimpa properti yang sebelumnya digunakan. Untuk lebih jelasnya kunjungi: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html


0

Bisakah Anda memeriksa dengan pembakar jika Anda mendapatkan 404? Saya punya masalah dalam pass dan saya menemukan bahwa ekstensi itu sama tetapi linux file.ttf berbeda dari file.TTF ... dan bekerja dengan semua browser kecuali firefox.

Semoga ini bisa membantu!


1
Saya sangat meragukan itu hanya 404 dalam satu browser dan bukan yang lain.
jason

@jason One browser dapat menggunakan tipe file berbeda dari yang lain. :)
ipalaus

Nah, dalam kasus yang saya alami masalah ini, saya dapat 100% mengatakan bahwa panel bersih Firebug menunjukkannya memuat font dengan sukses.
jason

0

Ini adalah masalah dengan bagaimana Anda mengatur jalur font-face Anda. Karena Anda tidak memulai path dengan "/", Firefox akan berusaha mencari font berdasarkan path dari stylesheet. Jadi pada dasarnya, Firefox mencari font Anda di direktori "root / css / font" alih-alih direktori "root / font". Anda dapat dengan mudah memperbaiki ini dengan memindahkan folder font ke folder css, atau menambahkan / ke awal jalur font Anda.

Coba ini:

@font-face {
    font-family: "DroidSerif Regular";
    src: url("/font/droidserif-regular-webfont.eot");
    src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "DroidSerif Bold";
    src: url("/font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: "DroidSerif Regular" , serif;
}
h1 {
    font-weight: bold;
    font-family: "DroidSerif Bold";
}


0

Saya punya masalah serupa. Halaman demo fontsquirel berfungsi di FF tetapi bukan halaman saya sendiri meskipun semua file berasal dari domain yang sama!

Ternyata saya menautkan stylesheet saya dengan URL absolut (http://example.com/style.css) sehingga FF mengira itu berasal dari domain yang berbeda. Mengubah tautan stylesheet saya href ke /style.css sebagai gantinya memperbaiki hal-hal untuk saya.


0

Mungkin masalah Anda adalah masalah penamaan, khususnya yang berkaitan dengan penggunaan (atau tidak) spasi dan tanda hubung.

Saya mengalami masalah similair, yang saya pikir telah saya perbaiki dengan menempatkan opsional tanda kutip (') di sekitar font- / family-names, tapi itu sebenarnya secara implisit memperbaiki masalah penamaan.

Saya tidak sepenuhnya mutakhir tentang spesifikasi CSS, dan ada (yang menurut saya) beberapa ambiguitas dalam bagaimana klien yang berbeda menafsirkan spesifikasi. Selain itu, tampaknya juga terkait dengan konvensi penamaan PostScript, tapi tolong perbaiki saya jika saya salah!

Lagi pula seperti yang saya mengerti sekarang, deklarasi Anda menggunakan campuran dari dua rasa yang berbeda.

@font-face {
  font-family: "DroidSerif Regular";

Jika Anda akan mempertimbangkan Droid nama keluarga yang sebenarnya, di mana Sans dan Serif adalah anggota, seperti misalnya anak-anak mereka Sans Regular atau Serif Bold , maka Anda dapat menggunakan spasi di mana saja untuk pengidentifikasi concatinate, ATAU Anda menghapus spasi dan menggunakan CamelCasing untuk nama keluarga, dan tanda hubung untuk sub-pengidentifikasi.

Diterapkan pada deklarasi Anda, akan terlihat seperti ini:

@font-face {
  font-family: "Droid Serif Regular";

ATAU

@font-face {
  font-family: DroidSerif-Regular;

Saya pikir keduanya harus benar-benar legal, baik dengan atau tanpa tanda kutip, tetapi saya telah berhasil dengan berbagai klien. Mungkin, suatu hari, saya punya waktu untuk mencari tahu rincian tentang ini / ini.

Saya menemukan artikel ini membantu dalam memahami beberapa aspek yang terlibat: http://mathiasbynens.be/notes/unquoted-font-family

Artikel ini memiliki beberapa detail lebih lanjut tentang PostScript khusus, dan beberapa tautan ke spesifikasi Adobe PDF: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/


0

Tidak perlu dipusingkan dengan pengaturan hanya menghapus tanda kutip dan spasi dari font-family:

ini

body {font-family: "DroidSerif Regular", serif; }

menjadi ini

body {font-family: DroidSerifRegular, serif; }

0

Dalam kasus saya, saya sloved masalah dengan memasukkan kode gaya font-face

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

direclty di header di halaman index.html atau php Anda, dalam tag gaya. Bekerja untukku!


0

Karena itu, ini adalah salah satu hasil Google teratas untuk masalah ini. Saya ingin menambahkan apa yang memecahkan masalah ini untuk saya:

Saya harus menghapus format (opentype) dari src dari font-face, kemudian ia bekerja di Firefox juga. Ini berfungsi dengan baik di Chrome dan Safari sebelumnya.


0

Mungkin ini bukan karena kode Anda, Ini karena konfigurasi Firefox Anda.

Coba ini dari Tool bar Barat ke Unicode

View > Text Encoding > Unicode

0

Saya memiliki masalah yang sama dan menyelesaikannya dengan menambahkan meta untuk konten:

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

Ini terjadi di Firefox dan Edge jika Anda memiliki teks Unicode di html Anda.


-2

Saya tidak tahu bagaimana Anda membuat sintaks karena saya neved menggunakan svg dalam deklarasi font, tetapi Font Squirel memiliki alat yang sangat bagus untuk membuat sintaks bukti-font-face hanya dari satu font.

http://www.fontsquirrel.com/fontface/generator


Terima kasih rnaud, saya benar menggunakan fontsquirrel untuk di atas :). Hanya diformat ulang dengan tab dan spasi ke bentuk yang dapat dibaca.
Kaushik Gopal

Anda belum pernah menggunakan SVG dalam deklarasi font tetapi Anda menggunakan Font Squirrel? Maka Anda telah menggunakan SVG dalam deklarasi font.
jason

1
@jason: Anda dapat memilih tidak menggunakan SVG dengan Font Squirrel.
rossisdead

-2

Bisa juga dengan penggunaan URL di jalur tag font-face. Jika Anda menggunakan "http://domain.com" itu tidak berfungsi di Firefox, bagi saya mengubahnya menjadi "http://www.domain.com" berfungsi.


-2

Masalah saya adalah bahwa Windows menamai font 'font.TTF' dan firefox yang diharapkan 'font.ttf' saya melihat bahwa setelah membuka proyek saya di linux, mengganti nama font menjadi nama yang tepat dan semuanya berfungsi

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.