Fai in modo che i caratteri Adobe funzionino con CSS3 @ font-face in IE9

Sto costruendo una piccola applicazione Intranet e provo, senza fortuna, a utilizzare il carattere Adobe acquistato di recente. Come mi è stato comunicato, nel nostro caso non si tratta di una violazione della licenza.

Ho convertito le versioni .ttf / .otf del font in .woff, .eot e .svg, in modo da scegliere come target tutti i principali browser. La sintassi @ font-face che ho usato è sostanzialmente quella antiproiettile di 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');
    }

Ho modificato le intestazioni HTTP (aggiunto Access-Control-Allow-Origin = "*") per consentire riferimenti tra domini. In FF e Chrome funziona perfettamente, ma in IE9 ottengo:

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

Ho notato che quando converto il font da .ttf / .otf a .woff ottengo anche un file .afm , ma non ho idea che sia importante o meno ...

Qualche idea su come risolverlo?

[Modifica] - Ospito i miei siti Web (anche caratteri, ma in directory e sottodomini separati per contenuto statico) in IIS 7.5

Posso solo spiegarti come correggere l'errore "CSS3114".
Devi modificare il livello di incorporamento del tuo file TTF.

Utilizzando lo strumento appropriato è possibile impostarlo sull'incorporamento installabile consentito .
Per una versione a 64 bit, controlla la risposta di @ user22600 .

Come ha detto Knu, puoi usare questo strumento , tuttavia è compilato solo per MS-DOS. L'ho compilato per Win64. Scarica .

Uso:

1. Posizionare .exe nella stessa cartella del carattere che è necessario modificare

2. Passare a quella directory nella riga di comando

3. digitare embed fontname.fonttype, sostituendo fontname con il nome file e fonttype con l'estensione ieembed brokenFont.ttf

4. Tutto fatto! Il font dovrebbe ora funzionare.

Dovresti impostare il formato del font ie su "embedded-opentype" e non su "eot". Per esempio:

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

Stavo ottenendo il seguente errore:

CSS3114: @ font-face non è riuscito il controllo delle autorizzazioni per l'incorporamento di OpenType. L'autorizzazione deve essere installabile.
fontname.ttf

Dopo aver utilizzato il codice seguente il mio problema è stato risolto ....

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

Grazie ragazzi per avermi aiutato!
Saluti,
Renjith.

Prova questo, aggiungi queste righe nel web.config.

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

Una risposta diversa: problemi legali.

Ci sono un paio di cose da notare prima di farlo. Innanzitutto, per ottenere questo errore, in IE, ispeziona l'elemento, cambia scheda e cerca gli errori, credo che "CSS3114" venga visualizzato nella console.

Quello che devi capire è che questo è un problema di licenza. IE (gioco di parole previsto) se si sta tentando di caricare un carattere che causa questo errore, non si dispone delle autorizzazioni sul file per utilizzare il carattere e, se non si dispone dell'autorizzazione, è molto probabile che si possa perdere un battaglia legale (che è altamente improbabile) sull'uso di questo carattere in questo modo a meno che tu non sia in possesso della licenza. Quindi, per la prima volta, puoi ringraziare IE per essere l'unico browser a dirti "no", perché almeno ti fa sapere che stai facendo qualcosa di discutibile.

Detto questo, ecco la tua risposta:

Per prima cosa assicurati di utilizzare il miglior codice in .css, vedi alcune delle altre risposte css per questo.
Esempio di IE 11 css (funziona su tutti i browser moderni potrebbe essere necessario modificare per IE9):

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

Quindi, assicurati di avere un font web funzionante (probabilmente lo sai già vedendo il tuo font in altri browser). Se hai bisogno di un convertitore di font online, controlla qui: https://onlinefontconverter.com/

Infine, per eliminare l'errore "CSS3114". Per uno strumento online, fai clic qui: https://www.andrebacklund.com/fontfixer.html

È vero che IE9 richiede che i caratteri TTF abbiano i bit di incorporamento impostati su Installabile. Il generatore lo fa automaticamente, ma attualmente stiamo bloccando i caratteri Adobe per altri motivi. Potremmo revocare questa limitazione nel prossimo futuro.

Ho perso molto tempo a causa di questo problema. Finalmente ho trovato un'ottima soluzione me stesso. Prima stavo usando solo il font .ttf. Ma ho aggiunto un altro formato di carattere .eot che ha iniziato a funzionare in IE.

Ho usato il seguente codice e ha funzionato come un incantesimo in tutti i 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);
}

Spero che questo possa aiutare qualcuno.

Come utente Mac, non sono stato in grado di utilizzare gli strumenti da riga di comando MS-DOS e Windows menzionati per correggere l'autorizzazione all'incorporamento dei caratteri. Tuttavia, ho scoperto che è possibile risolvere questo problema usando FontLab per impostare l'autorizzazione su "Tutto è permesso". Spero che questa ricetta su come impostare l'autorizzazione del carattere su Installabile su Mac OS X sia utile anche per gli altri.

Se hai familiarità con nodejs / npm, ttembed-js è un modo semplice per impostare il flag "incorporamento consentito consentito" su un font TTF. Ciò modificherà il file .ttf specificato:

npm install -g ttembed-js

ttembed-js somefont.ttf

Il problema potrebbe riguardare la configurazione del tuo server: potrebbe non essere l'invio delle intestazioni giuste per i file dei caratteri. Dai un'occhiata alla risposta fornita per la domanda IE9 blocca il download di font web di origine incrociata .

EricLaw suggerisce di aggiungere quanto segue alla configurazione di Apache

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

Se vuoi farlo con uno script PHP invece di dover eseguire il codice C (o sei su un Mac come me e non puoi essere compilato con Xcode solo per aspettare un anno per l'apertura), ecco un Funzione PHP che è possibile utilizzare per rimuovere le autorizzazioni di incorporamento dal carattere:

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

Assicurati di eseguire il backup del file dei caratteri prima di eseguire questo codice e non incolparmi se si corrompe.

La fonte originale in C può essere trovata qui .

Per tutti coloro che ottengono l'errore: "tableversion deve essere 0, 1 o ed è esadecimale: 003" quando si utilizza ttfpatch, ho compilato un embed per 64 bit. Non ho cambiato nulla, ho solo aggiunto librerie necessarie e compilate. Utilizzare a proprio rischio.

Utilizzo: ConsoleApplication1 font.ttf

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

Puoi risolverlo seguendo il codice

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

Ho trovato che il eotfile dovrebbe essere messo oltre ttf. Se è sotto ttf, pensato che il carattere mostri correttamente, IE9 genererà ancora un errore.

Consiglia:

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

Sconsigliato :

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

Ho provato lo strumento ttfpatch e non ha funzionato da me. Internet Exploder 9 e 10 si sono ancora lamentati.

Ho trovato questa bella idea Git e risolto i miei problemi. https://gist.github.com/stefanmaric/a5043c0998d9fc35483d

Basta copiare e incollare il codice nel tuo CSS.

Di recente ho riscontrato questo problema con i caratteri .eot e .otf che producono gli errori CSS3114 e CSS3111 nella console durante il caricamento. La soluzione che ha funzionato per me era usare solo i formati .woff e .woff2 con un fallback di formato .ttf. I formati .woff verranno utilizzati prima di .ttf nella maggior parte dei browser e non sembrano innescare il problema delle autorizzazioni per l'incorporamento dei caratteri (css3114) e il problema del formato errato della denominazione dei caratteri (css3111). Ho trovato la mia soluzione in questo articolo estremamente utile sul problema CSS3111 e CSS3114 e leggendo anche questo articolo sull'uso di @ font-face .

nota: questa soluzione non richiede la ricompilazione, la conversione o la modifica di alcun file di font. È una soluzione solo per CSS. Il font con cui ho provato aveva .eot, .otf, .woff, .woff2 e .svg versioni generate per esso, probabilmente dalla fonte originale .ttf che ha prodotto l'errore 3114 quando l'ho provato, tuttavia .woff e. I file woff2 sembravano essere immuni a questo problema.

Questo è ciò che DID funziona per me con @ 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');
}

Questo è ciò che ha innescato gli errori con @ font-face in 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');
}

Questo funziona per me:

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