Faça as fonts da Adobe funcionarem com CSS3 @ font-face no IE9

Estou no processo de criar um pequeno aplicativo de intranet e tentar, sem sorte, usar a fonte Adobe que comprei recentemente. Como fui informado, no nosso caso não é uma violação de licença.

Eu converti as versões .ttf / .otf da fonte para .woff, .eot e .svg, para segmentar todos os principais navegadores. A syntax @ font-face que eu usei é basicamente a à prova de balas da 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'); } 

Eu modifiquei os headers HTTP (adicionei Access-Control-Allow-Origin = “*”) para permitir referências entre domínios. Em FF e Chrome funciona perfeitamente, mas no IE9 eu recebo:

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

Notei que ao converter fonte de .ttf / .otf para .woff eu também recebo um arquivo .afm , mas eu não tenho idéia se é importante ou não …

Alguma idéia de como resolver isso?

[Edit] – Eu hospedo meus sites (fonts também, mas sob diretório separado e subdomínio para conteúdo estático) no IIS 7.5

Só posso explicar como corrigir o erro “CSS3114”.
Você precisa alterar o nível de incorporação do seu arquivo TTF.

Usando a ferramenta apropriada , você pode configurá-la para incorporação instalável permitida .
Para uma versão de 64 bits, verifique a resposta do @ user22600.

Você deve definir o formato da fonte ie para ’embedded-opentype’ e não ‘eot’. Por exemplo:

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

Como o Knu disse, você pode usar essa ferramenta , mas ela é compilada apenas para o MS-DOS. Eu compilei para o Win64. Download .

Uso:

  1. Coloque o arquivo .exe na mesma pasta que a fonte que você precisa modificar

  2. Navegue para esse diretório na linha de comando

  3. digite embed fontname.fonttype , substituindo fontname pelo nome de arquivo e fonttype pela extensão ie embed brokenFont.ttf

  4. Tudo feito! Sua fonte deve funcionar agora.

Eu estava recebendo o seguinte erro:

CSS3114: @ font-face falhou na verificação de permissão de incorporação OpenType. A permissão deve ser instalável.
fontname.ttf

Depois de usar o código abaixo, meu problema foi resolvido ….

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

Obrigado pessoal por me ajudarem!
Felicidades,
Renjith.

Tente isto, adicione estas linhas no web.config.

      

Uma resposta diferente: questões legais.

Há algumas coisas para notar antes de fazer isso. Primeiro, para obter esse erro, no IE, inspecione o elemento, alterne suas guias e procure os erros, acredito que “CSS3114” apareça no console.

O que você precisa entender é que isso é um problema de licenciamento. IE (trocadilho intencional) se você está tentando carregar uma fonte que causa este erro, você não tem permissions no arquivo para usar a fonte, e se você não tem permissão, é muito provável que você perca um batalha legal (o que é altamente improvável) sobre o uso desta fonte desta maneira, a menos que você esteja segurando a licença. Então, pela primeira vez, você pode agradecer ao IE por ser o único navegador a dizer “não”, porque pelo menos permite que você saiba que está fazendo algo questionável.

Dito isto, aqui está sua resposta:

Primeiro, verifique se você está usando o melhor código em .css, veja algumas das outras respostas do css para isso.
IE 11 css exemplo (funciona em todos os navegadores modernos pode precisar de ser ajustado para o IE9):

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

Em seguida, verifique se você tem uma fonte da Web em funcionamento (provavelmente já sabe disso, vendo sua fonte em outros navegadores). Se você precisa de um conversor de fonte online, verifique aqui: https://onlinefontconverter.com/

Finalmente, para se livrar do erro “CSS3114”. Para uma ferramenta online, clique aqui: https://www.andrebacklund.com/fontfixer.html

É verdade que o IE9 requer fonts TTF para que os bits de incorporação sejam definidos como Instaláveis. O Generator faz isso automaticamente, mas atualmente estamos bloqueando as fonts da Adobe por outros motivos. Podemos levantar essa restrição no futuro próximo.

Eu perdi muito tempo por causa deste problema. Finalmente eu mesmo encontrei uma ótima solução. Antes eu estava usando somente a fonte .ttf. Mas eu adicionei um formato de fonte extra .eot que começou a trabalhar no IE.

Eu usei o seguinte código e funcionou como charme em todos os navegadores.

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

Espero que isso ajude alguém.

Como usuário de Mac, não consegui usar as ferramentas de linha de comando do MS-DOS e do Windows mencionadas para corrigir a permissão de incorporação de fonts. No entanto, descobri que você pode corrigir isso usando o FontLab para definir a permissão para “Tudo é permitido”. Espero que esta receita sobre como definir a permissão de fonte para Instalável no Mac OS X seja útil para outras pessoas também.

Se você estiver familiarizado com o nodejs / npm, o ttembed-js é uma maneira fácil de definir o sinalizador “incorporação instalável permitida” em uma fonte TTF. Isso modificará o arquivo .ttf especificado:

 npm install -g ttembed-js ttembed-js somefont.ttf 

O problema pode estar relacionado à configuração do seu servidor – pode não estar enviando os headers certos para os arquivos de fonts. Dê uma olhada na resposta dada para a pergunta IE9 bloqueia o download da fonte web de origem cruzada .

EricLaw sugere adicionar o seguinte à sua configuração do Apache

   Header set Access-Control-Allow-Origin "http://mydomain.com"   

Para todos que recebem o erro: “tableversion deve ser 0, 1 ou e é hex: 003” ao usar o ttfpatch, eu compilei a incorporação para 64 bits. Eu não mudei nada, apenas adicionei as bibliotecas necessárias e compiladas. Use a risco próprio.

Uso: ConsoleApplication1 font.ttf

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

Se você quer fazer isso com um script PHP ao invés de ter que rodar código C (ou você está em um Mac como eu e você não pode ser compilado com o Xcode apenas para esperar um ano para ele abrir), aqui está uma Função PHP que você pode usar para remover as permissions de incorporação da fonte:

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

Certifique-se de fazer backup de seu arquivo de fonte antes de executar este código e não me culpe se isso corrompe.

Fonte original em C pode ser encontrada aqui .

Você pode resolvê-lo seguindo o código

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

Eu encontrei eot arquivo deve ser colocado além do ttf . Se estiver sob ttf , a fonte mostrada corretamente, o IE9 ainda lançará um erro.

Recomendar:

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

Não recomendado:

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

Eu tentei a ferramenta ttfpatch e não funcionou comigo. Internet Explorer 9 e 10 ainda se queixaram.

Eu encontrei este bom Git Gist e resolveu meus problemas. https://gist.github.com/stefanmaric/a5043c0998d9fc35483d

Basta copiar e colar o código no seu CSS.

Recentemente, encontrei esse problema com fonts .eot e .otf, produzindo os erros CSS3114 e CSS3111 no console durante o carregamento. A solução que funcionou para mim foi usar apenas os formatos .woff e .woff2 com um fallback de formato .ttf. Os formatos .woff serão usados ​​antes de .ttf na maioria dos navegadores e não parecem acionar o problema de permissions de incorporação de fonts (css3114) e o problema de formatação incorreta de nomes de fonts (css3111). Eu encontrei a minha solução neste artigo extremamente útil sobre o problema CSS3111 e CSS3114 , e também lendo este artigo sobre o uso do @ font-face .

Nota: Esta solução não requer a recompilation, conversão ou edição de nenhum arquivo de fonte. É uma solução apenas para o css. A fonte com a qual testei tinha as versões .eot, .otf, .woff, .woff2 e .svg geradas para ela, provavelmente a partir da origem original .ttf que produziu o erro 3114 quando eu tentei, no entanto, o .woff e. Os arquivos woff2 pareciam estar imunes a esse problema.

Isto é o que DID trabalhou para mim com @ 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'); } 

Isso foi o que desencadeou os erros com @ font-face no 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'); } 

Isso funciona para mim:

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