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

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

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 .

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.

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

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

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.

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>

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

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.

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.

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.

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

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>

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

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 .

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

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

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.

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

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