Usar tipos de letra personalizados com o CSS?
Eu vi alguns sites novos que estão usando fontes personalizadas em seus sites (além do Arial regular, Tahoma, etc.).
E eles suportam uma boa quantidade de navegadores. Como se faz isso? Ao mesmo tempo, impedindo as pessoas de ter acesso gratuito para baixar a fonte, se possível.7 answers
Genericamente, pode usar um tipo de letra personalizado usando {[[2]} no seu CSS. Aqui está um exemplo muito básico:
@font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}
Então, trivialmente, para usar o tipo de letra num elemento específico:
.classname {
font-family: 'YourFontName';
}
(.classname é o seu selector).
Lembre-se que certos formatos de letra não funcionam em todos os navegadores; você pode usar fontsquirrel.com o gerador de para evitar a conversão de esforço.
Pode encontrar um bom conjunto de tipos de letra Web Gratuitos fornecidos por O Google Fonts (também tem gerado automaticamente Regras do CSS ([2]), para que não tenha de escrever as suas).
Ao mesmo tempo que impede as pessoas de terem acesso livre para descarregar a fonte, se possível
Não, Não é possível estilo do seu texto com um tipo de letra personalizado incorporado através de CSS, ao mesmo tempo que impede as pessoas de baixá-lo. Você precisa usar imagens, Flash, ou a telaHTML5 , todas as quais não são muito práticas.
Espero que isso tenha ajudado!Para se certificar de que o seu tipo de letra é compatível com o navegador cruzado, certifique-se de que utiliza esta sintaxe:
@font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
Retirado deaqui .
Tem de baixar o ficheiro do tipo de letra e carregá-lo no seu CSS.
F. E. estou a usar o tipo de letra do Yanone Kaffeesatz na minha aplicação Web.
Carrego e uso-o via
@font-face {
font-family: "Yanone Kaffeesatz";
src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}
Se não encontrares fontes de que gostes Google.com/webfonts ou fontsquirrel.com pode sempre criar o seu próprio tipo de letra web com um tipo de letra que criou.
Aqui está um bom tutorial: Faça o seu próprio kit de tipos de letra face
Apesar de não ter a certeza de impedir alguém de descarregar a sua fonte. Espero que isto ajude.Há também uma ferramenta interessante chamada CUFON. Há uma demonstração de como usá-lo neste blog É muito simples e interessante. Além disso, não permite que as pessoas ctrl+c/ctrl+v o conteúdo gerado.
Váaqui para converter o seu tipo de letra ttf para woff antes.
@font-face
{
font-family:'Open Sans';
src:url('OpenSans-Regular.woff');
}
Hoje existem quatro formatos de contêiner de tipos de letra em uso na web: EOT, TTF, WOFF, eWOFF2.
- O EOT é apenas,
- O TTF tem suporte parcial IE,
- O WOFF goza do maior suporte possível, mas não está disponível em alguns navegadores mais antigos
- O suporte 2.0 é um trabalho em curso para muitos navegadores.
Se quiser que a sua aplicação web tenha o mesmo tipo de letra em todos os navegadores, então poderá querer fornecer todos os 4 tipos de letra em CSS
@font-face {
font-family: 'besom'; !important
src: url('fonts/besom/besom.eot');
src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
url('fonts/besom/besom.woff2') format('woff2'),
url('fonts/besom/besom.woff') format('woff'),
url('fonts/besom/besom.ttf') format('truetype'),
url('fonts/besom/besom.svg#besom_2regular') format('svg');
font-weight: normal;
font-style: normal;
}