it-swarm.com.de

Sorgen Sie dafür, dass Adobe-Schriften in IE9 mit CSS3 @ font-face funktionieren

Ich bin dabei, eine kleine Intranet-Anwendung zu erstellen, und versuche, ohne Erfolg, Adobe-Schrift zu verwenden, die ich kürzlich gekauft habe. Wie ich informiert wurde, handelt es sich in unserem Fall nicht um eine Lizenzverletzung.

Ich konvertierte die .ttf/.otf-Versionen von font in .woff, .eot und .svg, um alle wichtigen Browser anzusprechen. Die @ font-face-Syntax, die ich verwendet habe, 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 (hinzugefügt Access-Control-Allow-Origin = "*"), um domänenübergreifende Referenzen zuzulassen. In FF und Chrome funktioniert es einwandfrei, 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

Ich habe festgestellt, dass ich beim Konvertieren von Fonts von .ttf/.otf in .woff auch eine .afm -Datei bekomme, aber ich habe keine Ahnung, ob es wichtig ist oder nicht ...

Irgendwelche Ideen, wie man das ausarbeitet?

[Bearbeiten] - Ich hoste meine Websites (auch Schriftarten, aber unter getrenntem Verzeichnis und unterer Domäne für statische Inhalte) unter IIS 7.5

130
Piotr Szmyd

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

Mit dem entsprechenden tool können Sie es auf installierbare Einbettung setzen.
Überprüfen Sie für eine 64-Bit-Version/user22600 answer .

94
Knu

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

Verwendungszweck:

  1. Legen Sie die EXE-Datei in demselben Ordner ab wie die zu ändernde Schriftart

  2. Navigieren Sie in der Befehlszeile zu diesem Verzeichnis

  3. geben Sie embed fontname.fonttype ein und ersetzen Sie fontname durch den Dateinamen und fonttype durch die Erweiterung, d. h. embed brokenFont.ttf.

  4. Alles erledigt! Ihre Schrift sollte jetzt funktionieren.

35
user22600

Sie sollten das Format der ie-Schriftart auf 'embedded-opentype' und nicht auf 'eot' festlegen. Beispiel:

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

Ich habe folgende Fehlermeldung erhalten:

CSS3114: @ font-face hat die Berechtigungsprüfung für die Einbettung in OpenType fehlgeschlagen Die Erlaubnis muss installierbar sein.
fontname.ttf

Nachdem der folgende Code verwendet wurde, wurde mein Problem behoben.

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

Danke, dass ihr mir geholfen habt!
Prost,
Renjith.

12
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>
9
Dan

Eine andere Antwort: Rechtliche Fragen.

Bevor Sie dies tun, sollten Sie einige Dinge beachten. Um diesen Fehler zu erhalten, prüfen Sie im IE das Element, wechseln die Registerkarten und suchen nach Fehlern. Ich glaube, "CSS3114" erscheint in der Konsole. 

Was Sie verstehen müssen, ist, dass dies ein Lizenzproblem ist. I.E. (Wortspiel beabsichtigt) Wenn Sie versuchen, eine Schrift zu laden, die diesen Fehler verursacht, haben Sie keine Berechtigungen für die Datei, um die Schrift zu verwenden, und wenn Sie keine Berechtigung haben, ist es sehr wahrscheinlich, dass Sie eine Legalität verlieren Kämpfen Sie (was höchst unwahrscheinlich ist), wenn Sie diese Schriftart auf diese Weise verwenden, es sei denn, Sie besitzen die Lizenz. Sie können sich zum ersten Mal bei IE dafür bedanken, dass Sie der einzige Browser sind, der Ihnen "Nein" sagt, weil Sie zumindest wissen lassen, dass Sie etwas Fragwürdiges tun. 

Das heißt, hier ist deine Antwort: 

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

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

Stellen Sie dann sicher, dass Sie über eine funktionierende Web-Schriftart verfügen (dies ist wahrscheinlich bereits bekannt, wenn Sie die Schriftart in anderen Browsern anzeigen). Wenn Sie einen Online-Font-Konverter benötigen, überprüfen 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

8
Patrick Knott

Es ist wahr, dass IE9 TTF-Schriftarten erfordert, um die Einbettungsbits auf Installable zu setzen. Der Generator führt dies automatisch aus, aber wir blockieren derzeit Adobe-Schriftarten aus anderen Gründen. Wir können diese Einschränkung in naher Zukunft aufheben.

7
Font Squirrel

Ich habe viel Zeit wegen dieses Problems verschwendet. Endlich fand ich selbst eine großartige Lösung. Vorher habe ich nur die .ttf-Schriftart verwendet. Aber ich fügte ein zusätzliches Schriftformat hinzu.

Ich habe folgenden Code verwendet und in allen Browsern funktionierte er wie ein Zauber.

@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 hilft jemandem.

7
Stack Developer

Wenn Sie mit nodejs/npm vertraut sind, ist ttembed-js eine einfache Möglichkeit, das Flag "Installierbares Einbetten zulässig" für eine TTF-Schriftart festzulegen. Dadurch wird die angegebene .ttf-Datei geändert:

npm install -g ttembed-js

ttembed-js somefont.ttf
4
bendytree

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

4
buijs

Möglicherweise handelt es sich um ein Problem mit Ihrer Serverkonfiguration - es werden möglicherweise nicht die richtigen Kopfzeilen für die Zeichensatzdateien gesendet. Sehen Sie sich die Antwort an, die Sie für die Frage IE9-Block-Download der Cross-Origin-Webschriftart erhalten haben.

EricLaw schlägt vor, der 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>
3
Joseph Earl

Für alle, die den Fehler erhalten: "tableversion muss 0, 1 oder und ist hex: 003", wenn Sie ttfpatch verwenden, das ich für 64bit einbetten habe. Ich habe nichts geändert, nur noch benötigte libs hinzugefügt und kompiliert. Verwendung auf eigene Gefahr.

Verwendung: ConsoleApplication1 font.ttf

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

2
Christian

Wenn Sie dies mit einem PHP -Skript tun möchten, anstatt C-Code auszuführen (oder Sie sind auf einem Mac wie mir und können nicht mit Xcode kompiliert werden, nur um ein Jahr zu warten, bis der Code geöffnet wird.) ), hier ist eine PHP - Funktion, mit der Sie die Berechtigungen zum Einbetten 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 eine Sicherungskopie Ihrer Schriftartdatei erstellen, bevor Sie diesen Code ausführen, und beschuldigen Sie mich nicht, wenn sie beschädigt wird.

Originalquelle in C kann gefunden werden hier .

2
NobleUplift

Ich fand, dass eot die Datei jenseits von ttf eingefügt werden sollte. Wenn es sich um ttf handelt, da 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');
  }
0
shisaq

Sie können es lösen, indem Sie folgenden Code verwenden

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

Ich habe das Tool ttfpatch ausprobiert und es funktionierte von mir nicht. Internet Exploder 9 und 10 haben sich noch beschwert.

Ich habe diese Nice Git Gist gefunden und meine Probleme gelöst. https://Gist.github.com/stefanmaric/a5043c0998d9fc35483d

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

0
Mark O'Russa

Ich habe dieses Problem kürzlich mit .eot- und .otf-Schriftarten festgestellt, die beim Laden in der Konsole die CSS3114- und CSS3111-Fehler erzeugten. Die Lösung, die für mich funktionierte, bestand darin, nur die Formate .woff und .woff2 mit einem Fallback-Format .ttf zu verwenden. Die .woff-Formate werden in den meisten Browsern vor .ttf verwendet und scheinen nicht das Problem mit der Berechtigung zum Einbetten von Schriftarten (css3114) und das falsche Format für die Benennung von Schriftarten (css3111) auszulösen. Ich habe meine Lösung in diesem äußerst hilfreichen Artikel über die Ausgabe von CSS3111 und CSS3114 gefunden und auch diesen Artikel über @ font-face gelesen. 

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

Dies ist, was DID für mich 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');
}
0
bwigs

Das funktioniert für mich:

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