Jadikan font Adobe berfungsi dengan CSS3 @ font-face di IE9


132

Saya sedang dalam proses membangun aplikasi intranet kecil dan mencoba, tanpa hasil, untuk menggunakan font Adobe yang saya beli belakangan ini. Seperti yang saya ketahui, dalam kasus kami ini bukan pelanggaran lisensi.

Saya mengonversi versi .ttf / .otf dari font ke .woff, .eot dan .svg, jadi untuk menargetkan semua browser utama. Sintaks @ font-face yang saya gunakan pada dasarnya adalah antipeluru dari Font Spring :

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot');
    src: url('myfont-webfont.eot?#iehack') format('eot'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

Saya memodifikasi header HTTP (ditambahkan Access-Control-Allow-Origin = "*") untuk memungkinkan referensi lintas-domain. Di FF dan Chrome berfungsi dengan baik, tetapi di IE9 saya mendapatkan:

CSS3111: @font-face encountered unknown error.  
myfont-webfont.woff
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
myfont-webfont.ttf

Saya perhatikan bahwa ketika mengkonversi font dari .ttf / .otf ke .woff saya juga mendapatkan file .afm , tapi saya tidak tahu apakah itu penting atau tidak ...

Ada ide bagaimana cara mengatasinya?

[Sunting] - Saya meng-host situs web saya (font juga, tetapi di bawah direktori dan subdomain terpisah untuk konten statis) di bawah IIS 7.5


16
Memberi +1 untuk pertanyaan yang bagus, cerdas, dan lengkap dengan semua pekerjaan rumah yang dilakukan. Kami mendapatkan ini terlalu jarang hari ini!
Pekka

Memang itu adalah pertanyaan yang diajukan dengan baik, tapi sayangnya, duplikat.
Joseph Earl

1
Tidak, ini jelas bukan duplikat, seperti pada font non-Adobe solusi yang saya temukan berfungsi dengan baik. Apa yang berbeda adalah bahwa itu tidak terjadi dengan referensi font lintas-domain kurasa - saya mendapatkan "@ font-face mengalami kesalahan yang tidak diketahui" dengan .woff font sebagai kebalikan dari "@ font-face gagal permintaan lintas asal" di yang lain disebutkan kasus.
Piotr Szmyd

Saya mengalami masalah dengan baris ini setelah mengubah opsi penyematan: url('myfont-webfont.eot?#iehack') format('eot'), Menghapusnya memecahkan kesalahan terakhir (kesalahan yang tidak diketahui).
Jonathan DeMarks

Jawaban:


95

Saya hanya bisa menjelaskan kepada Anda bagaimana cara memperbaiki kesalahan "CSS3114".
Anda harus mengubah level penyematan file TTF Anda.

Dengan menggunakan alat yang sesuai, Anda dapat mengaturnya agar pemasangan yang diizinkan diizinkan .
Untuk versi 64-bit, periksa jawaban @ user22600 .


11
Sebagai catatan untuk ttfpatch, gunakan fsType = 0.
Harga Collin

11
ttfpatch tidak bekerja untuk saya. Kesalahan: tableversion harus 0, 1 atau dan hex: 003
Don Rolling

11
embed berfungsi dengan baik. Cukup unduh sumber dan kompilasi ... ini StackOverflow, kan? Hanya satu file. :-) Untuk VS2010 Anda perlu menambahkan:#include <string.h>
Jonathan DeMarks

3
@ JonathanDeMarks: Terima kasih atas dorongannya - ttfpatch juga tidak bekerja untuk saya, tetapi mengkompilasi ulang embed.c untuk 64 bit pasti berhasil.
Peter Majeed

4
Bagi mereka yang tidak suka dengan kompilasi program C di Windows, itu sangat mudah. Ikuti panduan ini dari Microsoft: msdn.microsoft.com/en-us/library/bb384838.aspx
lee_mcmullen

36

Seperti kata Knu, Anda dapat menggunakan alat ini , namun hanya dikompilasi untuk MS-DOS. Saya mengkompilasinya untuk Win64. Unduh .

Pemakaian:

  1. Tempatkan .exe di folder yang sama dengan font yang perlu Anda modifikasi

  2. Arahkan ke direktori itu di baris perintah

  3. ketik embed fontname.fonttype, ganti fontname dengan nama file dan fonttype dengan ekstensi yaituembed brokenFont.ttf

  4. Semua selesai! Font Anda sekarang seharusnya berfungsi.


Terima kasih atas laporannya. Tetap.
user22600

Benar-benar banyak membantu saya. dengan menggunakan Win64 bit exe.
imdadhusen

Ya Tuhan, itu luar biasa. Sisi tidak semua: gunakan baris perintah windows dan bukan pengganti seperti GIT BASH, saya biasanya lebih suka bash, tidak bekerja di sini.
Halter

voila! cemerlang!!
oldboy

33

Anda harus mengatur format font yaitu ke 'embedded-opentype' dan bukan 'eot'. Sebagai contoh:

src: url('fontname.eot?#iefix') format('embedded-opentype')

Terima kasih, tapi bukan itu masalahnya. Itu semua tentang menanamkan izin dalam font itu sendiri.
Piotr Szmyd

Ini bekerja untuk Firefox dan Chrome (IE tetap bekerja). Terima kasih!
Dmitri Mogilevski

12

Saya mendapatkan kesalahan berikut:

CSS3114: @ font-face gagal memeriksa izin penyisipan OpenType. Izin harus Dapat Diinstal.
fontname.ttf

Setelah menggunakan kode di bawah ini masalah saya terselesaikan ....

src: url('fontname.ttf') format('embedded-opentype')

Terima kasih sudah membantu saya!
Ceria,
Renjith.


Saya pikir solusi Anda berfungsi untuk beberapa keluarga font tetapi tidak yang lain. Itu tergantung pada tingkat izin penyematan font. Misalnya, ini tidak akan berfungsi untuk font Abadi
Philip007

Yup, ini sama sekali tidak membuat perbedaan dengan file .ttf saya, saya masih mendapatkan "Izin harus Dapat Diinstal." kesalahan. Apa yang memperbaiki masalah ini adalah menjalankan .exe Christian (di tempat lain di halaman ini) untuk memodifikasi file .ttf. Setelah melakukan ini, IE11 akan menampilkan font .ttf di halaman web saya dengan benar.
Mike Gledhill

9

Coba ini, tambahkan baris ini di web.config.

<system.webServer>
  <staticContent>
     <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
  </staticContent>
</system.webServer>

Saya tidak berpikir itu adalah kesalahan yang sama dengan yang dia laporkan tetapi itu akan diperlukan jika Anda melayani .woffs dari IIS, ya. Atau Anda dapat menambahkan kunci registri untuk .woff di bawah HKLM \ Software \ Classes dan mengatur nilai "Tipe Konten" di dalamnya. Namun Wikipedia mengatakan tipe yang benar adalahapplication/font-woff .
Rup

Memang, ini hal yang berbeda. Saya memiliki entri ini - masalahnya adalah font yang sudah diunduh yang tidak dapat dibuka di IE karena izin yang tertanam.
Piotr Szmyd

Saya sedang melakukan pengembangan di lingkungan Apache, dan ketika saya memindahkan file font saya ke server Windows IIS, ini memperbaiki masalah saya.
Samuel Cook

8

Jawaban Berbeda: Masalah hukum.

Ada beberapa hal yang perlu diperhatikan sebelum Anda melakukan ini. Pertama, untuk mendapatkan kesalahan ini, di IE, periksa elemen, beralih tab Anda, dan cari kesalahan, saya percaya "CSS3114" muncul di konsol.

Yang perlu Anda pahami adalah ini masalah lisensi. IE (pun intended) jika Anda mencoba memuat font yang menyebabkan kesalahan ini, Anda tidak memiliki izin pada file untuk menggunakan font, dan jika Anda tidak memiliki izin, sangat mungkin Anda kehilangan pertempuran hukum (yang sendiri sangat tidak mungkin) dalam menggunakan font ini dengan cara ini kecuali Anda memegang lisensi. Jadi, Anda dapat, untuk pertama kalinya, berterima kasih kepada IE karena menjadi satu-satunya peramban yang memberi tahu Anda "tidak", karena setidaknya Anda tahu bahwa Anda melakukan sesuatu yang dipertanyakan.

Yang mengatakan, inilah jawaban Anda:

Pertama pastikan Anda menggunakan kode terbaik dalam .css, lihat beberapa jawaban css lainnya untuk itu.
Contoh IE 11 css (berfungsi di semua browser modern mungkin perlu di-tweak untuk IE9):

@font-face {
font-family: "QuestionableLegalFont";
font-weight: bold;
src: url('../fonts/QuestionableLegalFont.ttf') format('truetype');
}

Kemudian, pastikan Anda memiliki font web yang berfungsi (Anda mungkin sudah tahu ini dengan melihat font Anda di browser lain). Jika Anda memerlukan konverter font online, periksa di sini: https://onlinefontconverter.com/

Akhirnya, Untuk menghilangkan kesalahan "CSS3114". Untuk alat online, klik di sini: https://www.andrebacklund.com/fontfixer.html


Alat online memperbaikinya untuk saya. Terima kasih!
James Hibbard

7

Memang benar bahwa IE9 membutuhkan font TTF untuk memiliki bit embedding diatur ke Installable. Generator melakukan ini secara otomatis, tetapi kami saat ini memblokir font Adobe karena alasan lain. Kami dapat mencabut batasan ini dalam waktu dekat.


7

Saya membuang banyak waktu karena masalah ini. Akhirnya saya menemukan solusi hebat sendiri. Sebelumnya saya hanya menggunakan font .ttf. Tapi saya menambahkan satu format font ekstra .eot yang mulai bekerja di IE.

Saya menggunakan kode berikut dan bekerja seperti pesona di semua browser.

@font-face {
font-family: OpenSans;
src: url(assets/fonts/OpenSans/OpenSans-Regular.ttf), 
url(assets/fonts/OpenSans/OpenSans-Regular.eot);
}

@font-face {
font-family: OpenSans Bold;
src: url(assets/fonts/OpenSans/OpenSans-Bold.ttf),
url(assets/fonts/OpenSans/OpenSans-Bold.eot);
}

Saya harap ini akan membantu seseorang.


4

Sebagai pengguna Mac, saya tidak dapat menggunakan alat baris perintah MS-DOS dan Windows yang disebutkan untuk memperbaiki izin penyematan font. Namun, saya menemukan bahwa Anda dapat memperbaikinya menggunakan FontLab untuk mengatur izin ke 'Semuanya diizinkan'. Saya harap resep ini tentang cara mengatur izin font untuk Installable pada Mac OS X juga bermanfaat bagi orang lain.


"Saya tidak dapat menggunakan alat-alat MS-DOS dan baris perintah Windows": Kode sumber disediakan meskipun - saya berharap itu hanya dikompilasi pada Mac?
Rup

Maaf, saya bermaksud mengatakan: Menjadi pengguna OS X Finder yang manja.
buijs

4

Jika Anda terbiasa dengan nodejs / npm, ttembed-js adalah cara mudah untuk mengatur flag "installable embedding diizinkan" pada font TTF. Ini akan mengubah file .ttf yang ditentukan:

npm install -g ttembed-js

ttembed-js somefont.ttf

Terima kasih - ini bekerja sangat baik untuk font .otf yang menyebabkan saya masalah di IE11.
J Sprague

3

Masalahnya mungkin berkaitan dengan konfigurasi server Anda - mungkin tidak mengirimkan tajuk yang tepat untuk file font. Lihatlah jawaban yang diberikan untuk pertanyaan IE9 memblokir unduhan font web lintas-asal .

EricLaw menyarankan untuk menambahkan yang berikut ini ke konfigurasi Apache Anda

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

Tapi ini bukan kasus yang sama. Saya sudah membaca posting itu dan sudah mencoba solusi yang Anda berikan. Masalahnya khusus dengan font Adobe. Saya mencoba menggunakan kit font dari Font Squirrel dan itu berfungsi dengan baik di semua browser (IE9 juga). Ketika saya mencoba menggunakan font Adobe (dikonversi ke format yang sesuai) dengan cara yang sama - IE9 berteriak dengan kesalahan ...
Piotr Szmyd

Dan - apa yang saya lupa katakan (saya akan mengedit pertanyaan saya) - Saya menjalankan situs web saya di bawah IIS 7.5.
Piotr Szmyd

Apakah mereka mengetikkan 1 font secara kebetulan?
Joseph Earl

Semua ini adalah font .ttf (TrueType) file tunggal. Tapi entah bagaimana saya mendapatkan file .afm (Adobe Font Metrics) ketika mengkonversi ke format .woff via onlinefontconverter.com. Saya tidak tahu apa yang harus dilakukan dengan itu?
Piotr Szmyd


2

Jika Anda ingin melakukan ini dengan skrip PHP alih-alih harus menjalankan kode C (atau Anda menggunakan Mac seperti saya dan Anda tidak dapat menggunakan kompilasi dengan Xcode hanya untuk menunggu satu tahun untuk membuka), berikut ini adalah Fungsi PHP yang dapat Anda gunakan untuk menghapus izin penyematan dari font:

function convertRestrictedFont($filename) {
    $font = fopen($filename,'r+');
    if ($font === false) {
        throw new Exception('Could not open font file.');
    }

    fseek($font, 12, 0);

    while (!feof($font)) {
        $type = '';
        for ($i = 0; $i < 4; $i++) {
            $type .= fgetc($font);
            if (feof($font)) {
                fclose($font);
                throw new Exception('Could not read the table definitions of the font.');
            }
        }
        if ($type == 'OS/2') {
            // Save the location of the table definition
            // containing the checksum and pointer to the data
            $os2TableDefinition = ftell($font);
            $checksum = 0;

            for ($i = 0; $i < 4; $i++) {
                fgetc($font);
                if (feof($font)) {
                    fclose($font);
                    throw new Exception('Could not read the OS/2 table header of the font.');
                }
            }

            // Get the pointer to the OS/2 table data
            $os2TablePointer = ord(fgetc($font)) << 24;
            $os2TablePointer |= ord(fgetc($font)) << 16;
            $os2TablePointer |= ord(fgetc($font)) << 8;
            $os2TablePointer |= ord(fgetc($font));

            $length = ord(fgetc($font)) << 24;
            $length |= ord(fgetc($font)) << 16;
            $length |= ord(fgetc($font)) << 8;
            $length |= ord(fgetc($font));

            if (fseek($font, $os2TablePointer + 8, 0) !== 0) {
                fclose($font);
                throw new Exception('Could not read the embeddable type of the font.');
            }

            // Read the fsType before overriding it
            $fsType = ord(fgetc($font)) << 8;
            $fsType |= ord(fgetc($font));

            error_log('Installable Embedding: ' . ($fsType == 0));
            error_log('Reserved: ' . ($fsType & 1));
            error_log('Restricted License: ' . ($fsType & 2));
            error_log('Preview & Print: ' . ($fsType & 4));
            error_log('Editable Embedding: ' . ($fsType & 8));
            error_log('Reserved: ' . ($fsType & 16)); 
            error_log('Reserved: ' . ($fsType & 32));
            error_log('Reserved: ' . ($fsType & 64));
            error_log('Reserved: ' . ($fsType & 128));
            error_log('No subsetting: ' . ($fsType & 256));
            error_log('Bitmap embedding only: ' . ($fsType & 512));                         
            error_log('Reserved: ' . ($fsType & 1024));
            error_log('Reserved: ' . ($fsType & 2048));
            error_log('Reserved: ' . ($fsType & 4096));
            error_log('Reserved: ' . ($fsType & 8192));
            error_log('Reserved: ' . ($fsType & 16384));
            error_log('Reserved: ' . ($fsType & 32768));

            fseek($font, ftell($font) - 2);

            // Set the two bytes of fsType to 0
            fputs($font, chr(0), 1);
            fputs($font, chr(0), 1);

            // Go to the beginning of the OS/2 table data
            fseek($font, $os2TablePointer, 0);

            // Generate a new checksum based on the changed 
            for ($i = 0; $i < $length; $i++) {
                $checksum += ord(fgetc($font));
            }
            fseek($font, $os2TableDefinition, 0);
            fputs($font, chr($checksum >> 24), 1);
            fputs($font, chr(255 & ($checksum >> 16)), 1);
            fputs($font, chr(255 & ($checksum >> 8)), 1);
            fputs($font, chr(255 & $checksum), 1);

            fclose($font);

            return true;
        }
        for ($i = 0; $i < 12; $i++) {
            fgetc($font);
            if (feof($font)) {
                fclose($font);
                throw new Exception('Could not skip a table definition of the font.');
            }
        }
    }

    fclose($font);

    return false;
}

Pastikan untuk membuat cadangan file font Anda sebelum menjalankan kode ini dan jangan salahkan saya jika itu rusak.

Sumber asli dalam C dapat ditemukan di sini .


Ini berfungsi dan sekarang seharusnya menjadi jawaban nomor 1. Sangat disayangkan sejauh ini untuk mendaki untuk menyalip jawaban yang lebih tua.
Angsa

Terima kasih banyak @ Goose! Saya awalnya menulis ini untuk pekerjaan saya, tetapi kode itu dibuang dan diganti, sehingga tinggal di Stack Overflow. Memberikan kode C untuk masalah aplikasi web jelas tidak ideal.
NobleUplift

@ Angsa saya perfer kode C. Selalu. Jadi ini masalah selera dan inilah mengapa jawaban ini setara dengan jawabannya. FYI Anda juga dapat menggunakan CGI untuk mengimplementasikan kode C di situs web Anda.
71GA

0

Anda dapat menyelesaikannya dengan mengikuti kode

@font-face {
  font-family: 'Font-Name';
  src: url('../fonts/Font-Name.ttf');
  src: url('../fonts/Font-Name.eot?#iefix') format('embedded-opentype');
}

Tidak, itu tidak akan berhasil. Kasus saya hanya tentang font yang tidak memungkinkan embedding oleh desain (tetapi dengan lisensi yang memungkinkannya). Jadi ini bukan tentang bagaimana saya menanamkannya. Periksa dengan font TTF yang secara eksplisit melarang penyematan web dan Anda akan memahami masalah saya.
Piotr Szmyd

0

saya menemukan eot file harus diletakkan di luar ttf. Jika di bawahttf , pikir font menunjukkan dengan benar, IE9 masih akan melempar kesalahan.

Sarankan:

@font-face {
  font-family: 'Font-Name';
  src: url('../fonts/Font-Name.eot?#iefix') format('embedded-opentype');
  src: url('../fonts/Font-Name.ttf')  format('truetype');
}

Tidak merekomendasikan:

@font-face {
  font-family: 'Font-Name';
  src: url('../fonts/Font-Name.ttf')  format('truetype');
  src: url('../fonts/Font-Name.eot?#iefix') format('embedded-opentype');
  }


0

Baru-baru ini saya mengalami masalah ini dengan font .eot dan .otf yang menghasilkan kesalahan CSS3114 dan CSS3111 di konsol saat memuat. Solusi yang berhasil bagi saya adalah hanya menggunakan format .woff dan .woff2 dengan format .ttf fallback. Format .woff akan digunakan sebelum .ttf di sebagian besar browser dan sepertinya tidak memicu masalah izin penyematan font (css3114) dan masalah penamaan font salah format (css3111). Saya menemukan solusi saya dalam artikel yang sangat membantu tentang masalah CSS3111 dan CSS3114 ini , dan juga membaca artikel ini tentang penggunaan @ font-face .

Catatan: Solusi ini tidak memerlukan kompilasi ulang, mengubah atau mengedit file font apa pun. Ini adalah solusi css-only. Font yang saya uji dengan memiliki versi .eot, .otf, .woff, .woff2 dan .svg yang dihasilkan untuk itu, mungkin dari sumber .ttf asli yang menghasilkan 3114 kesalahan ketika saya mencobanya, namun .woff dan. file woff2 tampaknya kebal terhadap masalah ini.

Inilah yang DID bekerja untuk saya dengan @ font-face:

@font-face {
  font-family: "Your Font Name";
  font-weight: normal;
  src: url('your-font-name.woff2') format('woff2'),
       url('your-font-name.woff') format('woff'),
       url('your-font-name.ttf')  format('truetype');
}

Inilah yang memicu kesalahan dengan @ font-face di IE:

@font-face {
  font-family: 'Your Font Name';
  src: url('your-font-name.eot');
  src: url('your-font-name.eot?#iefix') format('embedded-opentype'),
       url('your-font-name.woff2') format('woff2'),
       url('your-font-name.woff') format('woff'),
       url('your-font-name.ttf')  format('truetype'),
       url('your-font-name.svg#svgFontName') format('svg');
}

0

Ini bekerja untuk saya:

@font-face {
  font-family: FontName;
  src: url('@{path-fonts}/FontName.eot?akitpd');
  src: url('@{path-fonts}/FontName.eot?akitpd#iefix') format('embedded-opentype'),
    url('@{path-fonts}/FontName.ttf?akitpd') format('truetype'),
    url('@{path-fonts}/FontName.woff?akitpd') format('woff'),
    url('@{path-fonts}/FontName.svg?akitpd#salvage') format('svg');
}
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.