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

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

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 .

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.

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

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

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.

Coba ini, tambahkan baris ini di web.config.

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

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

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.

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.

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.

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

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>

Untuk semua orang yang mendapatkan kesalahan: "tableversion harus 0, 1 atau dan hex: 003" saat menggunakan ttfpatch, saya telah mengkompilasi embed untuk 64bit. Saya belum mengubah apa-apa, hanya perlu menambahkan libs dan dikompilasi. Gunakan dengan risiko sendiri.

Penggunaan: ConsoleApplication1 font.ttf

http://www.mediafire.com/download/8x1px8aqq18lcx8/ConsoleApplication1.exe

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 .

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');
}

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');
  }

Saya mencoba alat ttfpatch dan tidak berhasil dari saya. Internet Exploder 9 dan 10 masih mengeluh.

Saya menemukan inti Git yang bagus ini dan menyelesaikan masalah saya. https://gist.github.com/stefanmaric/a5043c0998d9fc35483d

Cukup salin dan tempel kode di css Anda.

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');
}

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');
}