Estou trabalhando em um site que exige testes de fontes on-line, as fontes que tenho são todas .otf
Existe uma maneira de incorporar as fontes e fazê-las funcionar em todos os navegadores?
Caso contrário, que outras alternativas eu tenho?
Estou trabalhando em um site que exige testes de fontes on-line, as fontes que tenho são todas .otf
Existe uma maneira de incorporar as fontes e fazê-las funcionar em todos os navegadores?
Caso contrário, que outras alternativas eu tenho?
Respostas:
Você pode implementar sua OTF
fonte usando @ font-face como:
@font-face {
font-family: GraublauWeb;
src: url("path/GraublauWeb.otf") format("opentype");
}
@font-face {
font-family: GraublauWeb;
font-weight: bold;
src: url("path/GraublauWebBold.otf") format("opentype");
}
No entanto, se você deseja oferecer suporte a uma ampla variedade de navegadores modernos , recomendo que você mude para WOFF
e os TTF
tipos de fonte. WOFF
O tipo é implementado por todos os principais navegadores de desktop, enquanto o TTF
tipo é um substituto para os navegadores Safari, Android e iOS mais antigos. Se sua fonte for uma fonte livre, você poderá convertê-la usando, por exemplo, um conversor de fontes online .
@font-face {
font-family: GraublauWeb;
src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf") format("truetype");
}
Se você deseja oferecer suporte a quase todos os navegadores que ainda estão por aí (não é mais necessário IMHO), adicione mais alguns tipos de fonte, como:
@font-face {
font-family: GraublauWeb;
src: url("webfont.eot"); /* IE9 Compat Modes */
src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("webfont.woff") format("woff"), /* Modern Browsers */
url("webfont.ttf") format("truetype"), /* Safari, Android, iOS */
url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
}
Você pode ler mais sobre por que todos esses tipos são implementados e seus hacks aqui . Para obter uma visão detalhada de quais tipos de arquivos são suportados por quais navegadores, consulte:
@ font-face Suporte ao navegador
Suporte ao Navegador SVG-Fonts
espero que isto ajude
"
) ausentes nos exemplos de código?
Nos exemplos do Diretório de fontes do Google :
@font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: normal;
src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
Isso funciona em vários navegadores com .ttf, acredito que possa funcionar com .otf. (A Wikipedia diz que .otf é compatível com versões anteriores com .ttf). Caso contrário, você pode converter o arquivo .otf em .ttf
Aqui estão alguns bons sites:
Bom iniciador:
Outras informações: