IE9에서 Adobe 글꼴이 CSS3 @ font-face와 작동하도록 설정

작은 인트라넷 응용 프로그램을 작성하는 중입니다. 운 좋게도 최근에 구입 한 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 에서 내 웹 사이트 (글꼴도 있지만 정적 콘텐츠의 경우 별도의 디렉토리와 하위 도메인 아래)를 호스팅 합니다.

"CSS3114"오류 해결 방법 만 설명 할 수 있습니다.
TTF 파일의 포함 레벨을 변경해야합니다.

적절한 도구 를 사용하여 설치 가능한 포함 포함으로 설정할 수 있습니다.
64 비트 버전의 경우 @ user22600 's answer를 확인하십시오 .

Knu가 말했듯 이이 도구를 사용할 수 있지만 MS-DOS 전용으로 컴파일됩니다. Win64 용으로 컴파일했습니다. 다운로드 .

용법:

1. .exe를 수정해야하는 글꼴과 같은 폴더에 배치하십시오.

2. 명령 행에서 해당 디렉토리로 이동하십시오.

3. 입력 embed fontname.fonttype확장 예와 파일 이름과 fontType을 함께 글꼴 이름을 대체embed brokenFont.ttf

4. 다 했어요! 글꼴이 작동합니다.

즉, 글꼴의 형식을 'eot'가 아닌 'embedded-opentype'으로 설정해야합니다. 예를 들면 다음과 같습니다.

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

다음과 같은 오류가 발생했습니다.

CSS3114 : @ font-face가 OpenType 포함 권한 검사에 실패했습니다. 권한은 설치 가능해야합니다.
fontname.ttf

아래 코드를 사용한 후 내 문제가 해결되었습니다 ....

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

도와 주셔서 감사합니다!
건배,
Renjith.

이것을 시도하고 web.config 에이 줄을 추가하십시오.

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

다른 답변 : 법적 문제.

이 작업을 수행하기 전에 유의해야 할 사항이 몇 가지 있습니다. 먼저,이 오류를 얻으려면 IE에서 요소를 검사하고 탭을 전환하고 오류를 찾으십시오. 콘솔에 "CSS3114"가 나타납니다.

이해해야 할 것은 라이센스 문제입니다. 이 오류가 발생하는 글꼴을로드하려고하면 IE (pun 의도 된) 글꼴을 사용할 수있는 파일에 대한 권한이 없으며 권한이 없으면 권한을 잃을 가능성이 높습니다. 라이센스를 보유하고 있지 않는 한이 방식으로이 글꼴을 사용하는 것보다 법적 전투 (그 자체는 거의 불가능). 따라서 처음으로 "아니요"라고 말할 수있는 유일한 브라우저 인 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

IE9에서 임베딩 비트를 설치 가능으로 설정하려면 TTF 글꼴이 필요합니다. Generator가 자동으로이 작업을 수행하지만 현재 다른 이유로 Adobe 글꼴을 차단하고 있습니다. 가까운 시일 내에이 제한을 해제 할 수 있습니다.

이 문제로 인해 많은 시간을 낭비했습니다. 마침내 나는 훌륭한 해결책을 스스로 찾았다. .ttf 글꼴 만 사용하기 전에. 그러나 IE에서 작동하기 시작한 추가 글꼴 형식 .eot를 추가했습니다.

다음 코드를 사용했으며 모든 브라우저에서 매력처럼 작동했습니다.

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

이것이 누군가를 도울 수 있기를 바랍니다.

Mac 사용자는 글꼴 포함 권한을 수정하기 위해 언급 된 MS-DOS 및 Windows 명령 줄 도구를 사용할 수 없었습니다. 그러나 FontLab을 사용 하여이 문제를 해결하여 '모든 것이 허용됩니다'로 권한을 설정할 수 있음을 알았습니다. Mac OS X에서 글꼴 권한을 Installable 로 설정하는 방법에 대한이 레시피 가 다른 사람들에게도 유용하기를 바랍니다.

nodejs / npm에 익숙한 경우 ttembed-js 를 사용하여 TTF 글꼴에서 "installable embedding allowed"플래그를 쉽게 설정할 수 있습니다. 지정된 .ttf 파일이 수정됩니다.

npm install -g ttembed-js

ttembed-js somefont.ttf

문제는 서버 구성과 관련이있을 수 있습니다. 글꼴 파일에 올바른 헤더를 보내지 않을 수 있습니다. 교차 출처 웹 글꼴의 다운로드 IE9 차단 질문에 대한 답변을 살펴보십시오 .

EricLaw는 Apache 설정에 다음을 추가 할 것을 제안합니다

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

ttfpatch를 사용할 때 "tableversion은 0, 1 또는 16 진수 : 003이어야합니다"라는 오류가 발생하는 모든 사용자를 위해 64 비트에 대해 embed를 컴파일했습니다. 나는 아무것도 변경하지 않고 방금 추가 라이브러리를 추가하고 컴파일했습니다. 자기 책임으로 사용하십시오.

사용법 : ConsoleApplication1 font.ttf

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

C 코드를 실행하지 않고 PHP 스크립트 로이 작업을 수행하려는 경우 (또는 Mac과 같은 상태에서 1 년 동안 기다릴 때만 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의 원본 소스는 여기 에서 찾을 수 있습니다 .

다음 코드를 통해 해결할 수 있습니다

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

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

나는 ttfpatch 도구를 시도했지만 그것은 나에게서 작동하지 않았다. 인터넷 익스플로러 9와 10은 여전히 ​​불평했다.

나는이 멋진 Git 요점을 발견하고 내 문제를 해결했다. https://gist.github.com/stefanmaric/a5043c0998d9fc35483d

CSS에 코드를 복사하여 붙여 넣으십시오.

최근에로드 할 때 콘솔에서 CSS3114 및 CSS3111 오류를 생성하는 .eot 및 .otf 글꼴 에서이 문제가 발생했습니다. 나를 위해 일한 해결책은 .ttf 형식 대체로 .woff 및 .woff2 형식 만 사용하는 것이 었습니다. .woff 형식은 대부분의 브라우저에서 .ttf 이전에 사용되며 글꼴 포함 권한 문제 (css3114) 및 글꼴 이름이 잘못된 형식 문제 (css3111)를 유발하지 않는 것 같습니다. CSS3111 및 CSS3114 문제에 대한이 매우 유용한 기사 에서 내 솔루션을 찾았으며 @ font-face 사용에 대한 기사를 읽었습니다 .

참고 :이 솔루션에는 글꼴 파일을 다시 컴파일, 변환 또는 편집 할 필요가 없습니다. CSS 전용 솔루션입니다. 내가 테스트 한 글꼴에는 .eot, .otf, .woff, .woff2 및 .svg 버전이 있었으며 아마도 시도했을 때 3114 오류가 발생했지만 원래 .ttf 소스에서 생성되었지만 .woff 및. woff2 파일은이 문제에 영향을받지 않는 것 같습니다.

이것이 @ font-face에서 DID가 작동하는 것입니다.

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

이것이 IE의 @ font-face 오류를 유발 한 것입니다.

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

이것은 나를 위해 작동합니다 :

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