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


132

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


16
+1 para uma pergunta fina, inteligente e bem formulada, com todo o trabalho de casa feito. Hoje em dia, temos muito raramente!
Pekka

Na verdade, é uma pergunta bem colocada, mas, infelizmente, uma duplicata.
Joseph Earl

1
Não, certamente não é uma duplicata, pois em fontes que não são da Adobe, as soluções que encontrei funcionam perfeitamente. O que difere é que não é o caso da referência de fonte entre domínios, eu acho - recebo "@ font-face encontrou erro desconhecido" com a fonte .woff, em oposição a "@ font-face falhou a solicitação de origem cruzada" em outras casos.
Piotr Szmyd

Eu tive problemas com esta linha depois de alterar as opções de incorporação: url('myfont-webfont.eot?#iehack') format('eot'), removê-lo resolveu o último erro (erro desconhecido).
Jonathan DeMarks

Respostas:


95

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 .


11
Como uma observação para ttfpatch, use fsType = 0.
Collin Price

11
O ttfpatch não funcionou para mim. Erro: a versão da tabela deve ser 0, 1 ou e é hexadecimal: 003
Don Rolling

11
incorporar funciona bem. Basta baixar o código-fonte e compilar ... esse é o StackOverflow, certo? É apenas um arquivo. :-) Para o VS2010, você precisa adicionar:#include <string.h>
Jonathan DeMarks 25/03

3
@ JonathanDeMarks: Obrigado pelo incentivo - o ttfpatch também não funcionou para mim, mas recompilar o embed.c por 64 bits definitivamente fez o truque.
precisa saber é o seguinte

4
Para aqueles que não estão familiarizados com a compilação de programas C no Windows, é muito simples. Siga este guia da Microsoft: msdn.microsoft.com/en-us/library/bb384838.aspx
lee_mcmullen

36

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.


Obrigado pelo relatório. Fixo.
user22600

Realmente me ajuda muito. usando Win64 bit exe.
imdadhusen

Meu Deus, isso é incrível. Não é do lado de todos: use a linha de comando do Windows e não um substituto como o GIT BASH, geralmente prefiro o bash, não funciona aqui.
Halter

voila! brilhante!!
Oldboy

33

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

Obrigado, mas não foi esse o caso. Era tudo sobre a incorporação de permissões na própria fonte.
Piotr Szmyd

Isso funcionou para o Firefox e o Chrome (o IE estava funcionando de qualquer maneira). Obrigado!
Dmitri Mogilevski

12

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.


Acho que sua solução funciona para algumas famílias de fontes, mas não para outras. Depende do nível de permissão de incorporação da fonte. Por exemplo, isso não funcionará para a fonte Abadi
Philip007

Sim, isso não fez absolutamente nenhuma diferença nos meus arquivos .ttf, eu ainda estava recebendo a "Permissão deve ser instalável". erro. O que corrigiu esse problema foi executar o .exe de Christian (em outra parte desta página) para modificar os arquivos .ttf. Após fazer isso, IE11 iria exibir as fontes .ttf na minha página corretamente.
Mike Gledhill

9

Tente isso, adicione estas linhas no web.config.

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

Eu não acho que seja o mesmo erro que ele relatou, mas isso será necessário se você estiver servindo .woffs do IIS, sim. Como alternativa, você pode adicionar uma chave do Registro para .woff em HKLM \ Software \ Classes e definir o valor "Tipo de Conteúdo". No entanto, a Wikipedia diz que o tipo correto éapplication/font-woff .
Rup 31/01

De fato, é uma coisa diferente. Eu tinha essa entrada - o problema era com uma fonte já baixada que não pôde ser aberta no IE devido a permissões incorporadas.
Piotr Szmyd

Eu estava desenvolvendo um ambiente Apache e, quando mudei meus arquivos de fonte para um servidor Windows IIS, isso corrigiu meu problema.
Samuel Cook

8

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


A ferramenta on-line consertou para mim. Obrigado!
James Hibbard

7

É 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.


7

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.


4

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.


"Não consegui usar as ferramentas de linha de comando do MS-DOS e Windows": O código fonte é fornecido - eu esperaria que ele fosse compilado no Mac?
Rup

Desculpe, eu quis dizer: Ser um usuário mimado do OS X Finder.
30518

4

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

Obrigado - isso funcionou muito bem para as fontes .otf que estavam me causando problemas no IE11.
J Sprague

3

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>

Mas este não é o mesmo caso. Eu li esse post e já tentei a solução que você forneceu. O problema está especificamente nas fontes da Adobe. Tentei usar kits de fontes do Font Squirrel e eles funcionam perfeitamente em todos os navegadores (IE9 também). Quando tento usar fontes Adobe (convertido para formatos apropriados) da mesma maneira - IE9 grita com erros ...
Piotr Szmyd

E - o que eu esqueci de dizer (vou editar minha pergunta) - estou executando meus sites no IIS 7.5.
Piotr Szmyd

Eles são fontes do tipo 1 por acaso?
Joseph Earl

Essas são todas as fontes .ttf (TrueType) de arquivo único. Mas, de alguma forma, recebo um arquivo .afm (Adobe Font Metrics) ao converter para o formato .woff via onlinefontconverter.com. Eu não tenho idéia do que fazer com isso?
Piotr Szmyd


2

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 .


Isso funciona e agora deve ser a resposta número 1. É uma pena que tenha até agora subido para ultrapassar as respostas mais antigas.
ganso

Muito obrigado @Goose! Originalmente, escrevi isso para o meu trabalho, mas o código foi jogado fora e substituído, então ele permanece no Stack Overflow. Fornecer código C para um problema de aplicativo da web definitivamente não é o ideal.
NobleUplift 04/04

@Goose Eu prefiro o código C. Sempre. Portanto, é uma questão de gosto e é por isso que esta resposta é equivalente à resposta. Para sua informação, você também pode usar o CGI para implementar o código C em seu site.
71GA 6/07

0

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

Não, não vai funcionar. Meu caso era estritamente sobre fontes que não permitiam incorporação por design (mas com licença que permitia). Portanto, não é sobre como eu o incorporo. Verifique com uma fonte TTF que proíbe explicitamente a incorporação na Web e você entenderá meu problema.
Piotr Szmyd

0

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


0

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

0

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');
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.