ทำให้แบบอักษร Adobe ทำงานร่วมกับ CSS3 @ font-face ใน IE9


132

ฉันกำลังอยู่ในขั้นตอนการสร้างแอปพลิเคชั่นอินทราเน็ตขนาดเล็กและลองใช้แบบอักษร Adobe ที่ซื้อมาเมื่อเร็ว ๆ นี้โดยไม่มีโชค ตามที่ได้รับแจ้งในกรณีของเราไม่ใช่การละเมิดใบอนุญาต

ฉันแปลงฟอนต์เวอร์ชัน. ttf / .otf เป็น. woff, .eot และ. svg เพื่อกำหนดเป้าหมายเบราว์เซอร์หลักทั้งหมด ไวยากรณ์ @ font-face ที่ฉันใช้นั้นเป็นแบบกันกระสุนจาก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');
    }

ฉันแก้ไขส่วนหัว HTTP (เพิ่ม Access-Control-Allow-Origin = "*") เพื่ออนุญาตการอ้างอิงข้ามโดเมน ใน FF และ Chrome ทำงานได้อย่างสมบูรณ์ แต่ใน IE9 ฉันได้รับ:

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

ฉันสังเกตว่าเมื่อแปลงแบบอักษรจาก. ttf / .otf เป็น. woff ฉันจะได้รับไฟล์ ไฟล์. afmด้วย แต่ฉันไม่รู้ว่ามันสำคัญหรือไม่ ...

มีความคิดอย่างไรในการทำงาน?

[แก้ไข] - ฉันโฮสต์เว็บไซต์ของฉัน (แบบอักษรด้วย แต่อยู่ภายใต้ไดเรกทอรีและโดเมนย่อยแยกต่างหากสำหรับเนื้อหาคงที่) ภายใต้IIS 7.5


16
+1 สำหรับคำถามที่ดีฉลาดพูดดีพร้อมการบ้านทั้งหมดที่ทำ เราไม่ค่อยได้รับสิ่งเหล่านี้มากนักในทุกวันนี้!
Pekka

อันที่จริงมันเป็นคำถามที่ดี แต่น่าเศร้าที่ซ้ำกัน
Joseph Earl

1
ไม่มันไม่ซ้ำกันอย่างแน่นอนเนื่องจากในแบบอักษรที่ไม่ใช่ Adobe โซลูชันที่ฉันพบว่าทำงานได้อย่างสมบูรณ์แบบ สิ่งที่แตกต่างคือไม่ใช่กรณีที่มีการอ้างอิงแบบอักษรข้ามโดเมนฉันเดา - ฉันได้รับ "@ font-face พบข้อผิดพลาดที่ไม่รู้จัก" ด้วยแบบอักษร. woff ซึ่งตรงข้ามกับ "@ font-face failed cross-origin request" ในอื่น ๆ ที่กล่าวถึง กรณี
Piotr Szmyd

ฉันมีปัญหากับบรรทัดนี้หลังจากเปลี่ยนตัวเลือกการฝัง: url('myfont-webfont.eot?#iehack') format('eot'), การลบออกจะแก้ไขข้อผิดพลาดล่าสุด (ข้อผิดพลาดที่ไม่รู้จัก)
Jonathan DeMarks

คำตอบ:


95

ฉันอธิบายวิธีแก้ไขข้อผิดพลาด "CSS3114" ได้เท่านั้น
คุณต้องเปลี่ยนระดับการฝังไฟล์ TTF ของคุณ

การใช้ที่เหมาะสมเครื่องมือคุณสามารถตั้งค่าให้ฝังติดตั้งที่ได้รับอนุญาต
สำหรับรุ่น 64 บิตตรวจสอบ @ user22600 ของคำตอบ


11
หมายเหตุสำหรับ ttfpatch ให้ใช้ fsType = 0
ราคา Collin

11
ttfpatch ไม่ได้ผลสำหรับฉัน ข้อผิดพลาด: tableversion ต้องเป็น 0, 1 หรือและเป็น hex: 003
Don Rolling

11
การฝังใช้งานได้ดี เพียงดาวน์โหลดซอร์สและคอมไพล์ ... นี่คือ StackOverflow ใช่ไหม? มันเป็นเพียงไฟล์เดียว :-) สำหรับ VS2010 คุณต้องเพิ่ม:#include <string.h>
Jonathan DeMarks

3
@JonathanDeMarks: ขอบคุณสำหรับกำลังใจ - ttfpatch ไม่ได้ผลสำหรับฉันเช่นกัน แต่การคอมไพล์ embed.c ใหม่สำหรับ 64 บิตทำได้แน่นอน
Peter Majeed

4
สำหรับผู้ที่ไม่สนใจกับการรวบรวมโปรแกรม C บน Windows มันตรงไปตรงมามาก ทำตามคำแนะนำนี้จาก Microsoft: msdn.microsoft.com/en-us/library/bb384838.aspx
lee_mcmullen

36

ดังที่ Knu กล่าวไว้คุณสามารถใช้เครื่องมือนี้ได้แต่จะรวบรวมไว้สำหรับ MS-DOS เท่านั้น ฉันรวบรวมมันสำหรับ Win64 ดาวน์โหลด .

การใช้งาน:

  1. วาง. exe ไว้ในโฟลเดอร์เดียวกับฟอนต์ที่คุณต้องการแก้ไข

  2. ไปที่ไดเร็กทอรีนั้นในบรรทัดคำสั่ง

  3. พิมพ์embed fontname.fonttypeแทนที่ fontname ด้วยชื่อไฟล์และประเภทฟอนต์ด้วยนามสกุลคือembed brokenFont.ttf

  4. ทุกอย่างเสร็จเรียบร้อย! ตอนนี้แบบอักษรของคุณควรใช้งานได้แล้ว


ขอบคุณสำหรับรายงาน แก้ไขแล้ว.
user22600

ช่วยฉันได้มากจริงๆ โดยใช้ Win64 bit exe
imdadhusen

พระเจ้าของฉันมันวิเศษมาก ด้านข้างไม่ใช่ทั้งหมด: ใช้บรรทัดคำสั่ง windows ไม่ใช่สิ่งทดแทนเช่น GIT BASH ฉันมักชอบทุบตีไม่ได้ผลที่นี่
Halter

voila! ยอดเยี่ยม !!
oldboy

33

คุณควรตั้งค่ารูปแบบของฟอนต์ ie เป็น 'Embedded-opentype' ไม่ใช่ 'eot' ตัวอย่างเช่น:

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

ขอบคุณ แต่นั่นไม่เป็นเช่นนั้น ทั้งหมดนี้เกี่ยวกับการฝังสิทธิ์ในแบบอักษร
Piotr Szmyd

สิ่งนี้ใช้ได้กับ Firefox และ Chrome (IE ก็ใช้งานได้อยู่ดี) ขอบคุณ!
Dmitri Mogilevski

12

ฉันได้รับข้อผิดพลาดต่อไปนี้:

CSS3114: @ font-face ล้มเหลวในการตรวจสอบสิทธิ์การฝัง OpenType ต้องได้รับอนุญาตติดตั้งได้
fontname.ttf

หลังจากใช้รหัสด้านล่างปัญหาของฉันได้รับการแก้ไขแล้ว ....

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

ขอบคุณพวกคุณที่ช่วยฉัน!
ไชโย
Renjith


ฉันคิดว่าโซลูชันของคุณใช้ได้กับตระกูลฟอนต์บางตระกูล แต่ไม่ใช่แบบอื่น ขึ้นอยู่กับระดับสิทธิ์การฝังของฟอนต์ ตัวอย่างเช่นจะใช้ไม่ได้กับแบบอักษร Abadi
Philip007

ใช่สิ่งนี้ไม่ได้สร้างความแตกต่างอย่างแน่นอนกับไฟล์. tf ของฉันฉันยังคงได้รับข้อความ ความผิดพลาด สิ่งที่แก้ไขปัญหานี้ได้คือเรียกใช้. exe ของ Christian (ที่อื่นในหน้านี้) เพื่อแก้ไขไฟล์. ttf หลังจากทำเช่นนี้ IE11 จะแสดงฟอนต์. tf บนหน้าเว็บของฉันอย่างถูกต้อง
Mike Gledhill

9

ลองเพิ่มบรรทัดนี้ใน web.config

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

ฉันไม่คิดว่านั่นเป็นข้อผิดพลาดเดียวกันกับที่เขารายงาน แต่จะต้องมีหากคุณให้บริการ. woffs จาก IIS ใช่ หรือคุณสามารถเพิ่มคีย์รีจิสทรีสำหรับ. woff ภายใต้ HKLM \ Software \ Classes และตั้งค่า "Content Type" ได้ อย่างไรก็ตามวิกิพีเดียกล่าวว่าประเภทที่ถูกต้องคือ application/font-woff
Rup

แท้จริงแล้วมันเป็นสิ่งที่แตกต่าง ฉันมีรายการนี้ - ปัญหาเกิดจากแบบอักษรที่ดาวน์โหลดมาแล้วซึ่งไม่สามารถเปิดใน IE ได้เนื่องจากสิทธิ์ในตัว
Piotr Szmyd

ฉันกำลังทำการพัฒนาในสภาพแวดล้อม Apache และเมื่อฉันย้ายไฟล์ฟอนต์ไปยังเซิร์ฟเวอร์ Windows IIS สิ่งนี้ช่วยแก้ปัญหาของฉันได้
Samuel Cook

8

คำตอบที่แตกต่าง: ปัญหาทางกฎหมาย

มีสองสิ่งที่ควรทราบก่อนที่คุณจะทำสิ่งนี้ ขั้นแรกเพื่อรับข้อผิดพลาดนี้ใน IE ให้ตรวจสอบองค์ประกอบเปลี่ยนแท็บของคุณและค้นหาข้อผิดพลาดฉันเชื่อว่า "CSS3114" ปรากฏในคอนโซล

สิ่งที่คุณต้องเข้าใจคือนี่คือปัญหาการออกใบอนุญาต IE (ตั้งใจเล่น) หากคุณพยายามโหลดแบบอักษรที่ทำให้เกิดข้อผิดพลาดนี้แสดงว่าคุณไม่มีสิทธิ์ในไฟล์ในการใช้แบบอักษรและหากคุณไม่ได้รับอนุญาตมีโอกาสสูงที่คุณจะสูญเสีย การต่อสู้ทางกฎหมาย (ซึ่งไม่น่าเป็นไปได้สูง) ในการใช้แบบอักษรนี้ในลักษณะนี้เว้นแต่คุณจะถือใบอนุญาต ดังนั้นในครั้งแรกคุณสามารถขอบคุณ IE ที่เป็นเบราว์เซอร์เดียวที่บอกคุณว่า "ไม่" เพราะอย่างน้อยมันก็ช่วยให้คุณรู้ว่าคุณกำลังทำสิ่งที่น่าสงสัย

ที่กล่าวว่านี่คือคำตอบของคุณ:

ขั้นแรกให้แน่ใจว่าคุณใช้รหัสที่ดีที่สุดใน. css ดูคำตอบ css อื่น ๆ สำหรับสิ่งนั้น
ตัวอย่าง IE 11 css (ใช้งานได้กับเบราว์เซอร์สมัยใหม่ทั้งหมดอาจต้องปรับแต่งสำหรับ IE9):

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

จากนั้นตรวจสอบให้แน่ใจว่าคุณมีแบบอักษรบนเว็บที่ใช้งานได้ (คุณอาจทราบแล้วโดยดูแบบอักษรของคุณในเบราว์เซอร์อื่น) หากคุณต้องการตัวแปลงฟอนต์ออนไลน์ตรวจสอบที่นี่: https://onlinefontconverter.com/

สุดท้ายเพื่อกำจัดข้อผิดพลาด "CSS3114" สำหรับเครื่องมือออนไลน์คลิกที่นี่: https://www.andrebacklund.com/fontfixer.html


เครื่องมือออนไลน์แก้ไขให้ฉัน ขอบคุณ!
James Hibbard

7

จริงอยู่ที่ IE9 ต้องการฟอนต์ TTF เพื่อให้บิตการฝังตั้งค่าเป็นติดตั้งได้ Generator ทำสิ่งนี้โดยอัตโนมัติ แต่เรากำลังบล็อกแบบอักษร Adobe ด้วยเหตุผลอื่น ๆ เราอาจยกเลิกข้อ จำกัด นี้ในอนาคตอันใกล้นี้


7

ฉันเสียเวลาไปมากเพราะปัญหานี้ ในที่สุดฉันก็พบทางออกที่ดีด้วยตัวเอง ก่อนหน้านี้ฉันใช้แบบอักษร. ttf เท่านั้น แต่ฉันได้เพิ่มรูปแบบอักษรพิเศษ. eot ที่เริ่มทำงานใน IE

ฉันใช้รหัสต่อไปนี้และมันใช้งานได้ดีในทุกเบราว์เซอร์

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

ฉันหวังว่านี่จะช่วยใครบางคนได้


4

ในฐานะผู้ใช้ Mac ฉันไม่สามารถใช้เครื่องมือบรรทัดคำสั่ง MS-DOS และ Windows ที่กล่าวถึงเพื่อแก้ไขสิทธิ์การฝังฟอนต์ อย่างไรก็ตามฉันพบว่าคุณสามารถแก้ไขได้โดยใช้ FontLab เพื่อตั้งค่าการอนุญาตเป็น 'ทุกอย่างได้รับอนุญาต' ฉันหวังว่าสูตรนี้เกี่ยวกับวิธีตั้งค่าการอนุญาตแบบอักษรให้ติดตั้งบน Mac OS Xจะเป็นประโยชน์สำหรับผู้อื่นเช่นกัน


"ฉันไม่สามารถใช้เครื่องมือบรรทัดคำสั่ง MS-DOS และ Windows ได้": ซอร์สโค้ดมีให้ - ฉันคาดหวังว่ามันจะคอมไพล์บน Mac เท่านั้น?
Rup

ขออภัยฉันตั้งใจจะพูดว่า: เป็นผู้ใช้ OS X Finder ที่เสียประโยชน์
buijs

4

หากคุณคุ้นเคยกับ nodejs / npm ttembed-jsเป็นวิธีง่ายๆในการตั้งค่าสถานะ "อนุญาตการฝังที่ติดตั้งได้" บนแบบอักษร TTF สิ่งนี้จะแก้ไขไฟล์. ttf ที่ระบุ:

npm install -g ttembed-js

ttembed-js somefont.ttf

ขอบคุณ - สิ่งนี้ใช้ได้ดีกับฟอนต์. otf ที่ทำให้ฉันมีปัญหาใน IE11
J Sprague

3

ปัญหาอาจเกี่ยวข้องกับการกำหนดค่าเซิร์ฟเวอร์ของคุณ - อาจไม่ได้ส่งส่วนหัวที่ถูกต้องสำหรับไฟล์แบบอักษร ดูคำตอบสำหรับคำถามที่IE9 บล็อกการดาวน์โหลดแบบอักษรของเว็บข้ามแหล่งที่มาดาวน์โหลดของตัวอักษรเว็บข้ามกำเนิด

EricLaw แนะนำให้เพิ่มสิ่งต่อไปนี้ในการกำหนดค่า Apache ของคุณ

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

แต่นี่ไม่ใช่กรณีเดียวกัน ฉันได้อ่านโพสต์นั้นและลองใช้วิธีแก้ปัญหาที่คุณให้มาแล้ว ปัญหานี้เกิดขึ้นกับฟอนต์ Adobe โดยเฉพาะ ฉันลองใช้ชุดฟอนต์จาก Font Squirrel และมันก็ทำงานได้ดีในทุกเบราว์เซอร์ (IE9 ด้วย) เมื่อฉันพยายามใช้แบบอักษร Adobe (แปลงเป็นรูปแบบที่เหมาะสม) ในลักษณะเดียวกัน - IE9
ส่งเสียง

และ - สิ่งที่ฉันลืมพูด (ฉันจะแก้ไขคำถามของฉัน) - ฉันใช้งานเว็บไซต์ของฉันภายใต้ IIS 7.5
Piotr Szmyd

พวกเขาพิมพ์แบบอักษร 1 โดยบังเอิญหรือไม่?
Joseph Earl

ทั้งหมดนี้เป็นแบบอักษร. ttf (TrueType) ไฟล์เดียว แต่อย่างใดฉันได้รับไฟล์. afm (Adobe Font Metrics) เมื่อแปลงเป็นรูปแบบ. woff ผ่าน onlinefontconverter.com ฉันไม่รู้ว่าจะทำอย่างไรกับสิ่งนั้น?
Piotr Szmyd

3

หากคุณต้องการทำสิ่งนี้ด้วยสคริปต์ PHP แทนที่จะต้องเรียกใช้รหัส C (หรือคุณใช้ Mac เหมือนฉันและคุณไม่สามารถรวบรวม Xcode ได้เพียงรอหนึ่งปีเพื่อให้เปิด) นี่คือ ฟังก์ชัน PHP ที่คุณสามารถใช้เพื่อลบการอนุญาตการฝังออกจากแบบอักษร:

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

อย่าลืมสำรองไฟล์แบบอักษรของคุณก่อนที่จะเรียกใช้รหัสนี้และอย่าโทษฉันหากไฟล์เสียหาย

ต้นฉบับใน C สามารถพบได้ที่นี่


สิ่งนี้ได้ผลและตอนนี้ควรเป็นคำตอบอันดับ 1 เป็นเรื่องที่น่าเสียดายมากที่ปีนขึ้นไปเพื่อแซงหน้าคำตอบที่เก่ากว่า
Goose

ขอบคุณมาก @Goose! เดิมทีฉันเขียนสิ่งนี้สำหรับงานของฉัน แต่รหัสถูกโยนทิ้งและถูกแทนที่ดังนั้นจึงอยู่ใน Stack Overflow การให้รหัส C สำหรับปัญหาเว็บแอปพลิเคชันนั้นไม่เหมาะอย่างยิ่ง
NobleUplift

@ ห่านฉันขอรหัส C เสมอ. ดังนั้นมันจึงเป็นเรื่องของรสนิยมและนี่คือเหตุผลที่คำตอบนี้เทียบเท่ากับคำตอบ FYI คุณยังสามารถใช้ CGI เพื่อติดตั้งโค้ด C ในเว็บไซต์ของคุณ
71GA

2

สำหรับทุกคนที่ได้รับข้อผิดพลาด: "tableversion ต้องเป็น 0, 1 หรือและเป็น hex: 003" เมื่อใช้ ttfpatch ฉันได้รวบรวมการฝังสำหรับ 64 บิตแล้ว ฉันไม่ได้เปลี่ยนแปลงอะไรเลยแค่เพิ่มต้องการ libs และคอมไพล์ ใช้ที่มีความเสี่ยงเอง

การใช้งาน: ConsoleApplication1 font.ttf

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


0

คุณสามารถแก้ได้โดยทำตามรหัส

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

ไม่มันจะไม่ทำงาน กรณีของฉันเกี่ยวกับแบบอักษรที่ไม่อนุญาตให้ฝังโดยการออกแบบ (แต่มีใบอนุญาตที่อนุญาต) ดังนั้นจึงไม่เกี่ยวกับวิธีการฝัง ตรวจสอบด้วยแบบอักษร TTF ที่ห้ามการฝังเว็บอย่างชัดเจนแล้วคุณจะเข้าใจปัญหาของฉัน
Piotr Szmyd

0

ผมพบว่าไฟล์ควรจะใส่เกินeot ttfหากอยู่ภายใต้ttfคิดว่าแบบอักษรแสดงอย่างถูกต้อง IE9 จะยังคงแสดงข้อผิดพลาด

แนะนำ:

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

ไม่แนะนำ:

@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

ฉันลองใช้เครื่องมือ ttfpatch แล้ว แต่มันไม่ได้ผล Internet Exploder 9 และ 10 ยังคงบ่นอยู่

ฉันพบส่วนสำคัญ Git ที่ดีนี้และแก้ไขปัญหาของฉันได้ https://gist.github.com/stefanmaric/a5043c0998d9fc35483d

เพียงคัดลอกและวางโค้ดใน css ของคุณ


0

ฉันเพิ่งพบปัญหานี้กับแบบอักษร. eot และ. otf ที่ทำให้เกิดข้อผิดพลาด CSS3114 และ CSS3111 ในคอนโซลเมื่อโหลด วิธีแก้ปัญหาที่ได้ผลสำหรับฉันคือใช้เฉพาะรูปแบบ. woff และ. woff2 กับทางเลือกรูปแบบ. ttf รูปแบบ. woff จะถูกใช้ก่อน. tf ในเบราว์เซอร์ส่วนใหญ่และดูเหมือนจะไม่ก่อให้เกิดปัญหาการอนุญาตการฝังแบบอักษร (css3114) และปัญหาการตั้งชื่อแบบอักษรที่ไม่ถูกต้อง (css3111) ฉันพบวิธีแก้ปัญหาของฉันในบทความที่เป็นประโยชน์อย่างยิ่งเกี่ยวกับปัญหา CSS3111 และ CSS3114และอ่านบทความนี้เกี่ยวกับการใช้ @ font-face@

หมายเหตุ: โซลูชันนี้ไม่จำเป็นต้องคอมไพล์ใหม่แปลงหรือแก้ไขไฟล์ฟอนต์ใด ๆ เป็นโซลูชันเฉพาะ css แบบอักษรที่ฉันทดสอบมีเวอร์ชัน. eot, .otf, .woff, .woff2 และ. svg ที่สร้างขึ้นอาจมาจากแหล่งที่มา. ttf ดั้งเดิมซึ่งทำให้เกิดข้อผิดพลาด 3114 เมื่อฉันลองอย่างไรก็ตาม. woff และ. ดูเหมือนว่าไฟล์ woff2 จะไม่สามารถแก้ไขปัญหานี้ได้

นี่คือสิ่งที่ฉันได้ผลกับ @ 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');
}

นี่คือสิ่งที่ทำให้เกิดข้อผิดพลาดกับ @ font-face ใน 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');
}

0

สิ่งนี้ใช้ได้กับฉัน:

@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

หากคุณต้องการทำสิ่งนี้ด้วยสคริปต์ Python แทนที่จะต้องรันโค้ด C / PHP นี่คือฟังก์ชัน Python3 ที่คุณสามารถใช้เพื่อลบการอนุญาตการฝังออกจากฟอนต์:

def convert_restricted_font(filename):
with open(filename, 'rb+') as font:

    font.read(12)
    while True:
        _type = font.read(4)
        if not _type:
            raise Exception('Could not read the table definitions of the font.')
        try:
            _type = _type.decode()
        except UnicodeDecodeError:
            pass
        except Exception as err:
            pass
        if _type != 'OS/2':
            continue
        loc = font.tell()
        font.read(4)
        os2_table_pointer = int.from_bytes(font.read(4), byteorder='big')
        length = int.from_bytes(font.read(4), byteorder='big')
        font.seek(os2_table_pointer + 8)

        fs_type = int.from_bytes(font.read(2), byteorder='big')
        print(f'Installable Embedding: {fs_type == 0}')
        print(f'Restricted License: {fs_type & 2}')
        print(f'Preview & Print: {fs_type & 4}')
        print(f'Editable Embedding: {fs_type & 8}')

        print(f'No subsetting: {fs_type & 256}')
        print(f'Bitmap embedding only: {fs_type & 512}')

        font.seek(font.tell()-2)
        installable_embedding = 0 # True
        font.write(installable_embedding.to_bytes(2, 'big'))
        font.seek(os2_table_pointer)
        checksum = 0
        for i in range(length):
            checksum += ord(font.read(1))
        font.seek(loc)
        font.write(checksum.to_bytes(4, 'big'))
        break


if __name__ == '__main__':
    convert_restricted_font("19700-webfont.ttf")

มันใช้งานได้ แต่ฉันลงเอยด้วยการแก้ปัญหาในการโหลดฟอนต์ใน IE ด้วย https เช่นนี้

ขอบคุณ NobleUplift

ต้นฉบับใน C สามารถพบได้ที่นี่

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.