Làm cho phông chữ Adobe hoạt động với CSS3 @ font-face trong IE9

Tôi đang trong quá trình xây dựng một ứng dụng mạng nội bộ nhỏ và không có may mắn sử dụng phông chữ Adobe mà tôi đã mua gần đây. Như tôi đã được thông báo, trong trường hợp của chúng tôi, đó không phải là vi phạm giấy phép.

Tôi đã chuyển đổi các phiên bản .ttf / .otf của phông chữ thành .woff, .eot và .svg, để nhắm mục tiêu tất cả các trình duyệt chính. Cú pháp khuôn mặt @ phông chữ tôi sử dụng về cơ bản là cú pháp chống đạn từ 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');
    }

Tôi đã sửa đổi các tiêu đề HTTP (đã thêm Access-Control-allow-Origin = "*") để cho phép các tham chiếu tên miền chéo. Trong FF và Chrome, nó hoạt động hoàn hảo, nhưng trong IE9 tôi nhận được:

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

Tôi nhận thấy rằng khi chuyển đổi phông chữ từ .ttf / .otf sang .woff tôi cũng nhận được một tệp .afm , nhưng tôi không biết liệu nó có quan trọng hay không ...

Bất kỳ ý tưởng làm thế nào để làm việc ra nó?

[Chỉnh sửa] - Tôi lưu trữ trang web của mình (phông chữ cũng vậy, nhưng trong thư mục riêng và tên miền phụ cho nội dung tĩnh) trong IIS 7.5

Tôi chỉ có thể giải thích cho bạn cách khắc phục lỗi "CSS3114".
Bạn phải thay đổi mức độ nhúng của tệp TTF.

Sử dụng công cụ thích hợp, bạn có thể đặt nó thành nhúng có thể cài đặt được phép .
Đối với phiên bản 64 bit, hãy kiểm tra câu trả lời của @ user22600 .

Như Knu đã nói, bạn có thể sử dụng công cụ này , tuy nhiên nó chỉ được biên dịch cho MS-DOS. Tôi đã biên dịch nó cho Win64. Tải về .

Sử dụng:

1. Đặt .exe vào cùng thư mục với phông chữ bạn cần sửa đổi

2. Điều hướng đến thư mục đó trong dòng lệnh

3. gõ embed fontname.fonttype, thay thế tên phông chữ bằng tên tệp và kiểu chữ bằng phần mở rộng tức làembed brokenFont.ttf

4. Tất cả đã được làm xong! Phông chữ của bạn bây giờ sẽ hoạt động.

Bạn nên đặt định dạng của phông chữ tức là 'nhúng-opentype' chứ không phải 'eot'. Ví dụ:

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

Tôi đã nhận được lỗi sau:

CSS3114: @ font-face không thành công kiểm tra quyền nhúng OpenType. Quyền phải được cài đặt.
fontname.ttf

Sau khi sử dụng mã dưới đây, vấn đề của tôi đã được giải quyết ....

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

Cảm ơn các bạn đã giúp tôi!
Chúc mừng,
Renjith.

Hãy thử điều này, thêm dòng này trong web.config.

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

Một câu trả lời khác nhau: Các vấn đề pháp lý.

Có một vài điều cần lưu ý trước khi bạn làm điều này. Đầu tiên, để có lỗi này, trong IE, kiểm tra phần tử, chuyển các tab của bạn và tìm lỗi, tôi tin rằng "CSS3114" xuất hiện trong bảng điều khiển.

Điều bạn cần hiểu là đây là vấn đề cấp phép. IE (ý định chơi chữ) nếu bạn đang cố tải một phông chữ gây ra lỗi này, bạn không có quyền trên tệp để sử dụng phông chữ đó và nếu bạn không có quyền, rất có thể bạn sẽ mất một cuộc chiến pháp lý (mà bản thân nó rất khó xảy ra) khi sử dụng phông chữ này theo cách này trừ khi bạn đang giữ giấy phép. Vì vậy, lần đầu tiên, bạn có thể cảm ơn IE vì là trình duyệt duy nhất nói với bạn "không", bởi vì ít nhất nó cho bạn biết rằng bạn đang làm điều gì đó đáng ngờ.

Điều đó nói rằng, đây là câu trả lời của bạn:

Trước tiên hãy đảm bảo bạn đang sử dụng mã tốt nhất trong .css, xem một số câu trả lời css khác cho điều đó.
Ví dụ css IE 11 (hoạt động trong tất cả các trình duyệt hiện đại có thể cần được điều chỉnh cho IE9):

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

Sau đó, đảm bảo bạn có một phông chữ web hoạt động (có thể bạn đã biết điều này bằng cách xem phông chữ của bạn trong các trình duyệt khác). Nếu bạn cần một trình chuyển đổi phông chữ trực tuyến, hãy kiểm tra tại đây: https://onlinefontconverter.com/

Cuối cùng, để thoát khỏi lỗi "CSS3114". Đối với một công cụ trực tuyến, bấm vào đây: https://www.andrebacklund.com/fontfixer.html

Đúng là IE9 yêu cầu phông chữ TTF phải có các bit nhúng được đặt thành Installable. Trình tạo tự động thực hiện việc này, nhưng chúng tôi hiện đang chặn phông chữ Adobe vì những lý do khác. Chúng tôi có thể dỡ bỏ hạn chế này trong tương lai gần.

Tôi đã lãng phí rất nhiều thời gian vì vấn đề này. Cuối cùng tôi cũng tìm được giải pháp tuyệt vời cho mình. Trước đây tôi chỉ sử dụng phông chữ .ttf. Nhưng tôi đã thêm một định dạng phông chữ bổ sung .eot bắt đầu hoạt động trong IE.

Tôi đã sử dụng mã sau đây và nó hoạt động như sự quyến rũ trong tất cả các trình duyệt.

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

Tôi hy vọng điều này sẽ giúp được ai đó.

Là người dùng Mac, tôi không thể sử dụng các công cụ dòng lệnh MS-DOS và Windows được đề cập để sửa lỗi cho phép nhúng phông chữ. Tuy nhiên, tôi phát hiện ra rằng bạn có thể khắc phục điều này bằng FontLab để đặt quyền thành 'Mọi thứ đều được phép'. Tôi hy vọng công thức này về cách đặt quyền cho phông chữ thành Có thể cài đặt trên Mac OS X cũng hữu ích cho những người khác.

Nếu bạn đã quen thuộc với nodejs / npm , ttembed-js là một cách dễ dàng để đặt cờ "cho phép nhúng có thể cài đặt" trên phông chữ TTF. Điều này sẽ sửa đổi tệp .ttf được chỉ định:

npm install -g ttembed-js

ttembed-js somefont.ttf

Vấn đề có thể là do cấu hình máy chủ của bạn - có thể không gửi đúng tiêu đề cho các tệp phông chữ. Hãy xem câu trả lời cho câu hỏi IE9 chặn tải xuống phông chữ web có nguồn gốc chéo .

EricLaw đề nghị thêm phần sau vào cấu hình Apache của bạn

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

Đối với tất cả những người gặp lỗi: "chuyển đổi bảng phải là 0, 1 hoặc là hex: 003" khi sử dụng ttfpatch, tôi đã biên dịch nhúng cho 64 bit. Tôi đã không thay đổi bất cứ điều gì, chỉ cần thêm libs và biên dịch. Sử dụng có nguy cơ riêng.

Cách sử dụng: ConsoleApplication1 font.ttf

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

Nếu bạn muốn làm điều này với tập lệnh PHP thay vì phải chạy mã C (hoặc bạn đang sử dụng máy Mac như tôi và bạn không thể biên dịch bằng Xcode chỉ để chờ một năm để mở), đây là một Hàm PHP mà bạn có thể sử dụng để xóa các quyền nhúng từ phông chữ:

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

Đảm bảo sao lưu tệp phông chữ của bạn trước khi chạy mã này và đừng đổ lỗi cho tôi nếu nó bị hỏng.

Nguồn gốc trong C có thể được tìm thấy ở đây .

Bạn có thể giải quyết nó bằng cách làm theo mã

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

Tôi tìm thấy eottập tin nên được đưa ra ngoài ttf. Nếu nó ở dưới ttf, nghĩ rằng phông chữ hiển thị chính xác, IE9 vẫn sẽ xuất hiện lỗi.

Giới thiệu:

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

Không đề xuất:

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

Tôi đã thử công cụ ttfpatch và nó không hoạt động với tôi. Internet Exploder 9 và 10 vẫn phàn nàn.

Tôi tìm thấy ý chính Git tốt đẹp này và nó đã giải quyết vấn đề của tôi. https://gist.github.com/stefanmaric/a5043c0998d9fc35483d

Chỉ cần sao chép và dán mã trong css của bạn.

Gần đây tôi đã gặp phải vấn đề này với phông chữ .eot và .otf tạo ra lỗi CSS3114 và CSS3111 trong bảng điều khiển khi tải. Giải pháp hiệu quả với tôi là chỉ sử dụng các định dạng .woff và .woff2 với dự phòng định dạng .ttf. Các định dạng .woff sẽ được sử dụng trước .ttf trong hầu hết các trình duyệt và dường như không kích hoạt vấn đề quyền nhúng phông chữ (css3114) và vấn đề đặt tên phông chữ không chính xác (css3111). Tôi đã tìm thấy giải pháp của mình trong bài viết cực kỳ hữu ích này về vấn đề CSS3111 và CSS3114 , và cũng đọc bài viết này về cách sử dụng @ font-face .

lưu ý: Giải pháp này không yêu cầu biên dịch lại, chuyển đổi hoặc chỉnh sửa bất kỳ tệp phông chữ nào. Nó là một giải pháp chỉ css. Phông chữ mà tôi đã thử nghiệm đã có các phiên bản Các tập tin woff2 dường như miễn dịch với vấn đề này.

Đây là những gì DID làm việc cho tôi với @ 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');
}

Đây là những gì đã gây ra lỗi với @ font-face trong 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');
}

Điều này làm việc cho tôi:

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