@ Font-face aninhada dentro @media não funciona no Firefox 3.5 e IE8

Question

Atualizar : Parece que eu fui pego em uma correlação que não era de fato a causa do problema. O problema era realmente um problema não relacionado em como arquivos CSS foram implantados. Veja minha resposta abaixo para mais detalhes.

Eu tenho @ font-face funcionando bem no WebKit (Safari e Chrome) e Opera, mas não no Firefox 3.5 ou IE 8.

Por recomendações do Google e outros, eu servir todos os ativos estáticos, incluindo CSS, a partir de um domínio separado do meu site principal. Se eu servem de tudo a partir do mesmo domínio, ele funciona muito bem em todos os navegadores . (Nota: Isto significa que respostas sobre sintaxe CSS são inúteis Eu já tenho tudo isso descobri e trabalhando muito Esta é apenas. sobre as questões de domínio cruzado).

Se eu servir CSS e arquivos de fontes do meu domínio ativos estáticos, e ter o servidor ativos estáticos definir o apropriado acesso de controle de cabeçalho (Access-Control-Allow-Origin), que deve trabalho, ele funciona em todos os lugares, exceto FF 3.5 e IE.

O que eu preciso fazer para fazer este trabalho?

Answer 1

A melhor resposta que eu descobri até agora, na esperança de que isso ajude alguém:

Tanto quanto eu posso dizer, a questão-chave é saber se o arquivo CSS (não o arquivo de fonte) é carregado cross-domain. Se eu carregar o arquivo CSS com as @ declarações font-face de meu domínio ativos estáticos, nada que eu faça vai tornar as fontes de trabalho em FF ou IE, independentemente dos cabeçalhos de controle de acesso. Se eu carregar o arquivo CSS a partir do mesmo domínio da página, ou eu mover meus @ declarações font-face em um bloco de estilo no cabeçalho da página, em seguida, ele funciona em todos os navegadores (I pode até carregar os arquivos de fontes entre domínios enquanto eu tenho o conjunto de cabeçalho de controle de acesso).

Para resumir:. AFAICT, FF 3.5 e IE 8 irá se recusar a honra @ declarações font-face em um arquivo CSS-cross-domain carregada, não importa o que

Eu adoraria ser corrigido neste se alguém sabe melhor e pode apontar o que mais eu poderia estar fazendo errado.

Na verdade, eu estava errado. Acontece que o CSS-compressor que estávamos usando para implantar ativos para ser servido a partir do domínio dedicado estava enrolando todo o pedaço de CSS com "tela @media {...}". Eu cuidadosamente comparou as regras @ font-face para garantir que o compressor não mexer com eles, mas nunca verifiquei o e fim começo do arquivo CSS para pegar o embrulho. Quando eu mudei para servir do mesmo domínio, que embrulho não aconteceu.

Como se vê, IE e Firefox não honra @ declarações font-face acondicionada dentro @media:. Safari, Chrome e Opera fazer

Sigh.

Answer 2

Eu sugeriria olhar este IEBlog pós , que descreve como você faz a incorporação de fontes no IE. Não, isso não corresponde à forma CSS3, e não, você não tem nenhuma outra maneira de fazê-lo no IE usando @ font-face.

Pode ser interessante notar que a Microsoft apresentou a abordagem EOT para o W3C em um movimento para obtê-lo padronizado, e W3C tem expressa interesse em que curso de ação.

Answer 3

Este link me ajudou muito: http: // robalo. ca / arquivos / html_and_css / tornando-a-embutindo-font-master

Infelizmente, eu estava muito desapontados com a qualidade do texto da maioria das fontes que eu queria tentar. Eu não conseguia decidir se algumas fontes não eram anti-aliasable ou não, mas os resultados não foram satisfatórios e eu continuo a usar a substituição de imagem.