Stellen Sie sicher, dass Adobe-Schriftarten mit CSS3 @ font-face in IE9 funktionieren

132

Ich bin gerade dabei, eine kleine Intranet-Anwendung zu erstellen und versuche ohne Glück, die kürzlich gekaufte Adobe-Schriftart zu verwenden . Wie mir mitgeteilt wurde, handelt es sich in unserem Fall nicht um eine Lizenzverletzung.

Ich habe die .ttf / .otf-Versionen der Schriftarten in .woff, .eot und .svg konvertiert, um alle gängigen Browser anzusprechen. Die von mir verwendete @ font-face-Syntax ist im Grunde die kugelsichere von 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');
    }

Ich habe die HTTP-Header geändert (Access-Control-Allow-Origin = "*" hinzugefügt), um domänenübergreifende Verweise zuzulassen. In FF und Chrome funktioniert es perfekt, aber in IE9 bekomme ich:

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

Mir ist aufgefallen, dass ich beim Konvertieren von Schriftarten von .ttf / .otf nach .woff auch eine .afm- Datei erhalte , aber ich habe keine Ahnung, ob es wichtig ist oder nicht ...

Irgendwelche Ideen, wie man es herausarbeitet?

[Bearbeiten] - Ich hoste meine Websites (auch Schriftarten, jedoch in einem separaten Verzeichnis und einer Subdomain für statische Inhalte) unter IIS 7.5

Piotr Szmyd
quelle
16
+1 für eine feine, intelligente, gut formulierte Frage mit allen Hausaufgaben. Wir bekommen diese heutzutage viel zu selten!
Pekka
In der Tat ist es eine gut formulierte Frage, aber leider ein Duplikat.
Joseph Earl
1
Nein, es ist sicherlich kein Duplikat, da in Nicht-Adobe-Schriftarten die Lösungen, die ich gefunden habe, perfekt funktionieren. Was sich unterscheidet, ist, dass dies bei domänenübergreifenden Verweisen auf Schriftarten nicht der Fall ist. Ich denke, bei der .woff-Schriftart wird "@ font-face hat einen unbekannten Fehler festgestellt" angezeigt, im Gegensatz zu "@ font-face fehlgeschlagene Cross-Origin-Anforderung" in anderen genannten Fällen Fälle.
Piotr Szmyd
Ich hatte Probleme mit dieser Zeile, nachdem ich die Einbettungsoptionen geändert hatte: Durch url('myfont-webfont.eot?#iehack') format('eot'), Entfernen wurde der letzte Fehler behoben (unbekannter Fehler).
Jonathan DeMarks

Antworten:

95

Ich kann Ihnen nur erklären, wie Sie den Fehler "CSS3114" beheben können.
Sie müssen die Einbettungsstufe Ihrer TTF-Datei ändern.

Mit dem entsprechenden Tool können Sie festlegen, dass die installierbare Einbettung zulässig ist .
Überprüfen Sie für eine 64-Bit-Version die Antwort von @ user22600 .

Knu
quelle
11
Verwenden Sie als Hinweis für ttfpatch fsType = 0.
Collin Price
11
ttfpatch hat bei mir nicht funktioniert. Fehler: Tabellenversion muss 0, 1 oder sein und ist hex: 003
Don Rolling
11
Einbetten funktioniert gut. Laden Sie einfach die Quelle herunter und kompilieren Sie ... das ist StackOverflow, oder? Es ist nur eine Datei. :-) Für VS2010 müssen Sie hinzufügen:#include <string.h>
Jonathan DeMarks
3
@JonathanDeMarks: Danke für die Ermutigung - ttfpatch hat auch bei mir nicht funktioniert, aber das Neukompilieren von embedded.c für 64 Bit hat definitiv den Trick getan.
Peter Majeed
4
Für diejenigen, die mit dem Kompilieren von C-Programmen unter Windows nicht vertraut sind, ist dies sehr einfach. Folgen Sie dieser Anleitung von Microsoft: msdn.microsoft.com/en-us/library/bb384838.aspx
lee_mcmullen
36

Wie Knu sagte, können Sie dieses Tool verwenden , es ist jedoch nur für MS-DOS kompiliert. Ich habe es für Win64 kompiliert. Herunterladen .

Verwendung:

  1. Platzieren Sie die EXE-Datei im selben Ordner wie die Schriftart, die Sie ändern müssen

  2. Navigieren Sie in der Befehlszeile zu diesem Verzeichnis

  3. Typ embed fontname.fonttype, wobei der Schriftname durch den Dateinamen und der Schrifttyp durch die Erweiterung ersetzt wird, d. hembed brokenFont.ttf

  4. Alles erledigt! Ihre Schriftart sollte jetzt funktionieren.

user22600
quelle
Danke für den Bericht. Fest.
user22600
Hilf mir wirklich sehr. mit Win64 Bit exe.
Imdadhusen
Mein Gott, das ist unglaublich. Seite nicht zu allen: Verwenden Sie die Windows-Befehlszeile und kein Ersatz wie GIT BASH, ich bevorzuge normalerweise Bash, funktioniert hier nicht.
Halter
voila! brillant!!
Oldboy
33

Sie sollten das Format der Schriftart auf 'embedded-opentype' und nicht auf 'eot' einstellen. Beispielsweise:

src: url('fontname.eot?#iefix') format('embedded-opentype')
stefannh
quelle
Danke, aber das war nicht der Fall. Es ging darum, Berechtigungen in die Schriftart selbst einzubetten.
Piotr Szmyd
Dies funktionierte für Firefox und Chrome (IE funktionierte trotzdem). Danke dir!
Dmitri Mogilevski
12

Ich habe den folgenden Fehler erhalten:

CSS3114: @ font-face fehlgeschlagen OpenType-Einbettungsberechtigungsprüfung. Die Berechtigung muss installierbar sein.
fontname.ttf

Nachdem ich den folgenden Code verwendet hatte, wurde mein Problem behoben ....

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

Vielen Dank, dass ihr mir geholfen habt!
Prost,
Renjith.

Renjith
quelle
Ich denke, Ihre Lösung funktioniert für einige Schriftfamilien, andere jedoch nicht. Dies hängt von der Einbettungsberechtigungsstufe der Schriftart ab. Dies funktioniert beispielsweise nicht für die Abadi-Schriftart
Philip007
Ja, das machte absolut keinen Unterschied zu meinen .ttf-Dateien. Ich erhielt immer noch die Meldung "Berechtigung muss installierbar sein". Error. Was dieses Problem behoben hat, war die Ausführung von Christians EXE-Datei (an anderer Stelle auf dieser Seite), um die .ttf-Dateien zu ändern. Danach würde IE11 die .ttf-Schriftarten auf meiner Webseite korrekt anzeigen.
Mike Gledhill
9

Versuchen Sie dies, fügen Sie diese Zeilen in die web.config ein.

<system.webServer>
  <staticContent>
     <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
  </staticContent>
</system.webServer>
Dan
quelle
Ich glaube nicht, dass dies derselbe Fehler ist, den er gemeldet hat, aber das ist erforderlich, wenn Sie .woffs von IIS bereitstellen, ja. Alternativ können Sie unter HKLM \ Software \ Classes einen Registrierungsschlüssel für .woff hinzufügen und darin den Wert "Content Type" festlegen. Wikipedia sagt jedoch, dass der richtige Typ istapplication/font-woff .
Rup
In der Tat ist es eine andere Sache. Ich hatte diesen Eintrag - das Problem war mit einer bereits heruntergeladenen Schriftart, die aufgrund eingebetteter Berechtigungen nicht im IE geöffnet werden konnte.
Piotr Szmyd
Ich habe in einer Apache-Umgebung entwickelt, und als ich meine Schriftdateien auf einen Windows IIS-Server verschoben habe, wurde mein Problem dadurch behoben.
Samuel Cook
8

Eine andere Antwort: Rechtliche Fragen.

Bevor Sie dies tun, müssen Sie einige Dinge beachten. Um diesen Fehler zu erhalten, überprüfen Sie im IE zunächst das Element, wechseln Sie die Registerkarten und suchen Sie nach den Fehlern. Ich glaube, dass "CSS3114" in der Konsole angezeigt wird.

Was Sie verstehen müssen, ist, dass dies ein Lizenzproblem ist. IE (Wortspiel beabsichtigt) Wenn Sie versuchen, eine Schriftart zu laden, die diesen Fehler verursacht, haben Sie keine Berechtigung für die Datei, die Schriftart zu verwenden, und wenn Sie keine Berechtigung haben, ist es sehr wahrscheinlich, dass Sie eine verlieren Rechtsstreit (was selbst höchst unwahrscheinlich ist) um die Verwendung dieser Schriftart auf diese Weise, es sei denn, Sie besitzen die Lizenz. Sie können sich also zum ersten Mal bei IE dafür bedanken, dass er der einzige Browser ist, der Ihnen "Nein" sagt, da er Sie zumindest darüber informiert, dass Sie etwas Fragwürdiges tun.

Das heißt, hier ist Ihre Antwort:

Stellen Sie zunächst sicher, dass Sie den besten Code in .css verwenden, und lesen Sie einige der anderen CSS-Antworten dazu.
IE 11 CSS-Beispiel (funktioniert in allen modernen Browsern und muss möglicherweise für IE9 optimiert werden):

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

Stellen Sie dann sicher, dass Sie eine funktionierende Web-Schriftart haben (Sie wissen dies wahrscheinlich bereits, indem Sie Ihre Schriftart in anderen Browsern sehen). Wenn Sie einen Online-Schriftkonverter benötigen, klicken Sie hier: https://onlinefontconverter.com/

Schließlich, um den Fehler "CSS3114" loszuwerden. Für ein Online-Tool klicken Sie hier: https://www.andrebacklund.com/fontfixer.html

Patrick Knott
quelle
Das Online-Tool hat es für mich behoben. Vielen Dank!
James Hibbard
7

Es ist richtig, dass für IE9 TTF-Schriftarten erforderlich sind, damit die Einbettungsbits auf Installierbar gesetzt sind. Der Generator führt dies automatisch aus. Derzeit blockieren wir jedoch Adobe-Schriftarten aus anderen Gründen. Wir können diese Einschränkung in naher Zukunft aufheben.

Schrift Eichhörnchen
quelle
7

Ich habe wegen dieses Problems viel Zeit verschwendet. Endlich habe ich selbst eine tolle Lösung gefunden. Vorher habe ich nur die Schriftart .ttf verwendet. Aber ich habe ein zusätzliches Schriftformat hinzugefügt .eot, das im IE zu funktionieren begann.

Ich habe folgenden Code verwendet und es hat in allen Browsern wie ein Zauber funktioniert.

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

Ich hoffe das wird jemandem helfen.

Stapelentwickler
quelle
4

Als Mac-Benutzer konnte ich die genannten MS-DOS- und Windows-Befehlszeilentools nicht verwenden, um die Berechtigung zum Einbetten von Schriftarten zu korrigieren. Ich habe jedoch herausgefunden, dass Sie dies mit FontLab beheben können, um die Berechtigung auf "Alles ist erlaubt" zu setzen. Ich hoffe, dass dieses Rezept zum Festlegen der Schriftberechtigung auf Installable unter Mac OS X auch für andere nützlich ist.

buijs
quelle
"Ich konnte die MS-DOS- und Windows-Befehlszeilentools nicht verwenden": Der Quellcode wird jedoch bereitgestellt - würde ich erwarten, dass er nur auf dem Mac kompiliert wird?
Rup
Entschuldigung, ich wollte sagen: Als verwöhnter OS X Finder-Benutzer.
Buijs
4

Wenn Sie mit nodejs / npm vertraut sind, können Sie mit ttembed -js auf einfache Weise das Flag "installierbare Einbettung zulässig" für eine TTF-Schriftart setzen. Dadurch wird die angegebene .ttf-Datei geändert:

npm install -g ttembed-js

ttembed-js somefont.ttf
Bendytree
quelle
Vielen Dank - dies funktionierte hervorragend für die .otf-Schriftarten, die mir Probleme im IE11 verursachten.
J Sprague
3

Das Problem liegt möglicherweise in Ihrer Serverkonfiguration - möglicherweise werden nicht die richtigen Header für die Schriftdateien gesendet. Schauen Sie sich die Antwort auf die Frage an, dass IE9 den Download von Cross-Origin-Web-Schriftarten blockiert .

EricLaw schlägt vor, Ihrer Apache-Konfiguration Folgendes hinzuzufügen

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "http://mydomain.com"
    </IfModule>
</FilesMatch>
Joseph Earl
quelle
Dies ist jedoch nicht der gleiche Fall. Ich habe diesen Beitrag gelesen und bereits die von Ihnen bereitgestellte Lösung ausprobiert. Das Problem liegt speziell bei Adobe-Schriftarten. Ich habe versucht, Font-Kits von Font Squirrel zu verwenden, und diese funktionieren in allen Browsern (auch IE9) einwandfrei. Wenn ich versuche, Adobe-Schriftarten (in entsprechende Formate konvertiert) auf die gleiche Weise zu verwenden - IE9 schreit mit Fehlern ...
Piotr Szmyd
Und - was ich vergessen habe zu sagen (ich werde meine Frage bearbeiten) - ich führe meine Websites unter IIS 7.5 aus.
Piotr Szmyd
Sind sie zufällig Typ 1-Schriftarten?
Joseph Earl
Dies sind alles Einzeltatei-.ttf-Schriftarten (TrueType). Aber irgendwie bekomme ich eine .afm-Datei (Adobe Font Metrics), wenn ich über onlinefontconverter.com in das .woff-Format konvertiere. Ich habe keine Ahnung, was ich damit anfangen soll?
Piotr Szmyd
2

Für alle, die den Fehler erhalten: "Tabellenversion muss 0, 1 oder und ist hex: 003" bei Verwendung von ttfpatch habe ich Embed für 64bit kompiliert. Ich habe nichts geändert, nur Need Libs hinzugefügt und kompiliert. Verwendung auf eigene Gefahr.

Verwendung: ConsoleApplication1 font.ttf

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

Christian
quelle
2

Wenn Sie dies mit einem PHP-Skript tun möchten, anstatt C-Code ausführen zu müssen (oder wenn Sie auf einem Mac wie mir arbeiten und nicht mit Xcode kompiliert werden können, nur um ein Jahr auf das Öffnen zu warten), finden Sie hier eine PHP-Funktion, mit der Sie die Einbettungsberechtigungen aus der Schriftart entfernen können:

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

Stellen Sie sicher, dass Sie Ihre Schriftartdatei sichern, bevor Sie diesen Code ausführen, und beschuldigen Sie mich nicht, wenn er beschädigt ist.

Die Originalquelle in C finden Sie hier .

NobleUplift
quelle
Dies funktioniert und sollte nun die Antwort Nummer 1 sein. Es ist eine Schande, dass es bisher klettern muss, um die älteren Antworten zu überholen.
Gans
Vielen Dank @Goose! Ich habe das ursprünglich für meinen Job geschrieben, aber der Code wurde weggeworfen und ersetzt, sodass er in Stack Overflow weiterlebt. Die Bereitstellung von C-Code für ein Webanwendungsproblem ist definitiv nicht ideal.
NobleUplift
@Goose ich perferiere C-Code. Immer. Es ist also Geschmackssache und deshalb entspricht diese Antwort der Antwort. Zu Ihrer Information, Sie können CGI auch verwenden, um C-Code in Ihrer Website zu implementieren.
71GA
0

Sie können es lösen, indem Sie dem folgenden Code folgen

@font-face {
  font-family: 'Font-Name';
  src: url('../fonts/Font-Name.ttf');
  src: url('../fonts/Font-Name.eot?#iefix') format('embedded-opentype');
}
wasiddiqui
quelle
Nein, es wird nicht funktionieren. In meinem Fall ging es ausschließlich um Schriftarten, die keine Einbettung durch Design zuließen (aber mit einer Lizenz, die dies zulässt). Es geht also nicht darum, wie ich es einbette. Überprüfen Sie es mit einer TTF-Schriftart, die das Einbetten in das Web ausdrücklich verbietet, und Sie werden mein Problem verstehen.
Piotr Szmyd
0

Ich fand eotDatei sollte darüber hinaus gelegt werden ttf. Wenn es unter ist ttfund die Schrift korrekt angezeigt wird, gibt IE9 immer noch einen Fehler aus.

Empfehlen:

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

Nicht empfehlen:

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

Ich habe das ttfpatch-Tool ausprobiert und es hat bei mir nicht funktioniert. Internet Exploder 9 und 10 beschwerten sich immer noch.

Ich fand diesen netten Git-Kern und er löste meine Probleme. https://gist.github.com/stefanmaric/a5043c0998d9fc35483d

Kopieren Sie einfach den Code und fügen Sie ihn in Ihr CSS ein.

Mark O'Russa
quelle
0

Dieses Problem ist kürzlich bei .eot- und .otf-Schriftarten aufgetreten, die beim Laden die Fehler CSS3114 und CSS3111 in der Konsole verursachen. Die Lösung, die für mich funktioniert hat, bestand darin, nur die Formate .woff und .woff2 mit einem Fallback im .ttf-Format zu verwenden. Die .woff-Formate werden in den meisten Browsern vor .ttf verwendet und scheinen nicht das Problem mit den Berechtigungen zum Einbetten von Schriftarten (css3114) und das Problem mit der falschen Formatierung von Schriftarten (css3111) auszulösen. Ich fand meine Lösung in diesem äußerst hilfreichen Artikel über das Problem CSS3111 und CSS3114 und las diesen Artikel über die Verwendung von @ font-face .

Hinweis: Für diese Lösung müssen keine Schriftdateien neu kompiliert, konvertiert oder bearbeitet werden. Es ist eine reine CSS-Lösung. Für die Schriftart, mit der ich getestet habe, wurden die Versionen .eot, .otf, .woff, .woff2 und .svg generiert, wahrscheinlich aus der ursprünglichen .ttf-Quelle, die den 3114-Fehler verursachte, als ich sie ausprobierte, jedoch die .woff und. woff2-Dateien schienen gegen dieses Problem immun zu sein.

Das hat bei mir mit @ font-face funktioniert:

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

Dies hat die Fehler mit @ font-face im IE ausgelöst:

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

Das funktioniert bei mir:

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