Faça com que as fontes da Adobe funcionem com CSS3 @ font-face no IE9

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

Eu converti as versões da fonte .ttf / .otf para .woff, .eot e .svg, para segmentar todos os principais navegadores. A sintaxe @ font-face que 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');
    }

Modifiquei os cabeçalhos HTTP (adicionamos Access-Control-Allow-Origin = "*") para permitir referências entre domínios. No FF e no Chrome, ele 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 fontes de .ttf / .otf para .woff, também recebo um arquivo .afm , mas não tenho idéia se é importante ou não ...

Alguma idéia de como resolver isso?

[Editar] - Eu hospedo meus sites (fontes também, mas em diretório e subdomínio separados 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á-lo para incorporação instalável permitida .
Para uma versão de 64 bits, verifique a resposta de @ user22600 .

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

Uso:

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

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

3. tipo embed fontname.fonttype, substituindo fontname com o nome do arquivo e FontType com a extensão ou sejaembed brokenFont.ttf

4. Tudo feito! Sua fonte agora deve funcionar.

Você deve definir o formato da fonte ie como 'tipo de código-fonte incorporado' e não 'eot'. Por exemplo:

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

Eu estava recebendo o seguinte erro:

CSS3114: @ font-face falhou na verificação de permissão de incorporação do 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 ajudar!
Saúde,
Renjith.

Tente isso, adicione estas linhas no web.config.

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

Uma resposta diferente: questões legais.

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

O que você precisa entender é que esse é um problema de licenciamento. IE (trocadilhos) se você estiver tentando carregar uma fonte que causa esse erro, não possui permissões no arquivo para usá-la e, se não tiver permissão, é altamente provável que você perca um uma batalha legal (que é altamente improvável) sobre o uso dessa fonte dessa maneira, a menos que você possua a licença. Assim, você pode, pela primeira vez, 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 em css para isso.
Exemplo de CSS do IE 11 (funciona em todos os navegadores modernos pode precisar 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 funcionando (provavelmente já sabe disso vendo sua fonte em outros navegadores). Se você precisar de um conversor de fontes on-line, verifique aqui: https://onlinefontconverter.com/

Por fim, para se livrar do erro "CSS3114". Para uma ferramenta online, clique aqui: https://www.andrebacklund.com/fontfixer.html

É verdade que o IE9 exige que as fontes TTF tenham os bits de incorporação definidos como Instalável. O Generator faz isso automaticamente, mas atualmente estamos bloqueando as fontes da Adobe por outros motivos. Podemos suspender essa restrição em um futuro próximo.

Perdi muito tempo por causa desse problema. Finalmente, eu mesmo achei ótima solução. Antes de usar apenas a fonte .ttf. Mas eu adicionei um formato de fonte extra .eot que começou a funcionar 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 Windows mencionadas para corrigir a permissão de incorporação de fontes. No entanto, descobri que você pode corrigir isso usando o FontLab para definir a permissão como 'Tudo é permitido'. Espero que esta receita sobre como definir a permissão de fonte como Instalável no Mac OS X também seja útil para outras pessoas.

Se você estiver familiarizado com o nodejs / npm, o ttembed-js é uma maneira fácil de definir o sinalizador "instalaçã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 servidor - pode não estar enviando os cabeçalhos corretos para os arquivos de fonte. Dê uma olhada na resposta dada para a pergunta IE9 bloqueia o download de fontes da web de origem cruzada .

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

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

Para todos que obtiverem o erro: "a versão da tabela deve ser 0, 1 ou hexadecimal: 003" ao usar o ttfpatch, compilei o embed para 64 bits. Eu não mudei nada, apenas adicionei libs necessárias e compiladas. Use por sua conta e risco.

Uso: ConsoleApplication1 font.ttf

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

Se você quiser fazer isso com um script PHP em vez de precisar executar o código C (ou você estiver em um Mac como eu e não puder ser compilado com o Xcode apenas para esperar um ano para que ele seja aberto), aqui está um Função PHP que você pode usar para remover as permissões 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 do seu arquivo de fonte antes de executar este código e não me culpe se ele corromper.

A 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 eotarquivo deve ser colocado além ttf. Se estiver abaixo ttf, apesar de a fonte ser exibida corretamente, o IE9 ainda gera 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 recomendo:

@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. O Internet Exploder 9 e 10 ainda se queixou.

Encontrei essa boa essência do Git e resolvi meus problemas. https://gist.github.com/stefanmaric/a5043c0998d9fc35483d

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

Recentemente, encontrei esse problema com fontes .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 do .ttf na maioria dos navegadores e não parecem acionar o problema de permissões de incorporação de fontes (css3114) e o problema de formato incorreto de nomeação de fontes (css3111). Encontrei minha solução neste artigo extremamente útil sobre o problema CSS3111 e CSS3114 e também li este artigo sobre o uso de @ font-face .

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

Isto é o que DID funcionou 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');
}

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