Pergunta

Como fazer cross-browser, atravesse a plataforma e todos os dispositivos compatíveis com css fonte de pilha?

Foi útil?

Solução

Você não pode garantir as fontes que serão usadas em um dispositivo móvel da mesma maneira que pode garantir quais fontes estão disponíveis em um computador normal.

Uma aposta segura é usar uma família de fontes genéricas que possa ser interpretada pelo navegador móvel para mostrar a fonte relevante, por exemplo,

font-family: serif; /* (e.g., Times) */
font-family: sans-serif; /* (e.g., Helvetica) */
font-family: monospace; /* (e.g., Courier) */

Outras dicas

A melhor solução é sempre fornecer uma genérico família de tipos de letra depois de quaisquer fontes específicas:

font-family: "Foo Regular", "Bar Sans", sans-serif;

Talvez este link possa lhe dar mais idéias:

http://www.ampsoft.net/webdesign-l/windowsmacfonts.html

Usar as famílias de fontes acima nunca me deu problemas.

Ele aponta, no item 15.3 da Recomendação do W3C sobre o 'font-family' propriedade que você deve ter fallback de fontes em uma fonte de pilha, de modo a que o visitante do site tem algumas escolhas viáveis.

O 'cofre web' font stacks eu uso, que abrangem a maioria, se não todos os dispositivos são como segue:

/* Web Safe Font Stacks (classes set in CSS) */
.head {font-family: Georgia,'Times New Roman',serif}
.para {font-family: Verdana,Arial,sans-serif}
.mono {font-family:'Courier New',Courier,monospace}
.fant {font-family: Papyrus,Impact,fantasy}
.curs {font-family:'Apple Chancery','Lucida Calligraphy',cursive}

Este cobre cabeçalhos, parágrafos, monoespaçada para amostras de código, fantasia, itens especiais, e cursiva para dar ênfase.Talvez você só precisa de um para cabeçalhos (H1~H6) e outro para o corpo do texto:

body {font-family: Verdana,Arial,sans-serif}
h1, h2, h3, h4, h5, h6 {font-family: Georgia,'Times New Roman',serif}

Verifique o seguinte texto a partir de 2010 que inclui o Linux e iOS.Dá a média de percentuais para o uso entre Windows, Mac, Linux e iOS: Cofre Web Fonts

Esqueça as pilhas de fontes de plataforma cruzada do navegador cruzado, os exemplos da web geralmente se preocupam apenas com o Windows e o OSX para o latim básico, eles falham em idiomas internacionais e no Linux e novos fatores de forma.

O Linux nunca usou as mesmas fontes que o Windows e o OSX por razões de licenciamento, e as ferramentas de design de fontes se tornaram maduras o suficiente, você encontra muita diversidade hoje em dia (não é fácil criar uma fonte de codificação grande, mas muitos usuários se preocupam apenas com fontes que cobrir seu idioma particular).

A criação de fontes tornou -se barata o suficiente para grandes empresas (incluindo fabricantes móveis) agora gostam de se diferenciar, comissionando novas fontes para grandes lançamentos (novo dispositivo ou versão principal do sistema operacional).

Quando as pesquisas de fontes ainda eram populares, a família de fontes Dejavu tinha muito alcance no Linux, esse pode não ser mais o caso. Dejavu e Arial têm métricas diferentes.

Basta usar famílias genéricas de fonte CSS em sua pilha, evitar qualquer derivada do Helvetica, não use um design que dependa de métricas de fonte específicas e você ficará bem.

Alguns links de "fontes seguras da web" do Google Top:

https://www.cssfontstack.com/

http://web.mit.edu/jmorzins/www/fonts.html

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top