Se você é um designer ou webmaster, em vez dissoao todo, você sabe como conectar fontes CSS. Se você é dono de um pequeno blog e decide decorar seu recurso e torná-lo único, então esse conhecimento deve ajudá-lo. Mas então é melhor começar do início, entender o que são as folhas de estilo em cascata, onde obter fontes e onde instalá-las.
Portanto, a resposta sobre como conectar uma fonte CSS ao site deve começar com uma descrição da própria linguagem formal. CSS é Cascading Style Sheets. Esta linguagem é usada como uma descrição da aparência do documento. Ele funciona em conjunto com a linguagem de marcação.
CSS funciona para indicar os recursos visuais das páginas da web. Este último deve ser criado com base em linguagens de marcação especiais HTML ou XHTML.
Para quem se destina o CSS?É necessário conectar fontes, definir cores, organizar blocos e assim por diante para webmasters, programadores que estão trabalhando na criação de um site. O principal objetivo das folhas de estilo em cascata é separar visualmente a estruturação. Ou seja, se o HTML formar um bloco sólido de texto, o CSS ajudará a "decorar" condicionalmente esse bloco, destacar elementos e atribuir parâmetros.
A segregação dá ao documento acessibilidade, mais flexibilidade e controle. Elimina elementos de conteúdo complexos e repetitivos.
Antes de descobrir como se conectar corretamentefontes em CSS, você precisa entender como as folhas de estilo em cascata sincronizam com o arquivo. Suas regras são implementadas no idioma de mesmo nome. A folha de estilo em si agora tem regras CSS que usa. As tabelas podem ser localizadas em um documento editado visualmente e em um arquivo separado com a extensão .css. Em tal arquivo, apenas comandos e notas para eles geralmente são localizados.
Portanto, fica claro que as folhas de estilo podem ser incluídas de várias maneiras. Vamos considerá-los mais detalhadamente.
Existem quatro opções para ajudarconectar fontes CSS, atribuir tonalidade, definir blocos, etc. Conforme mencionado anteriormente, um conjunto de regras pode estar em um arquivo escrito em HTML. Mas esta opção não é apreciada por muitos designers. Isso se deve ao fato de que em toda a tela de comandos é difícil encontrar parâmetros descritivos e gerenciar tudo isso. É muito mais fácil atribuir estilos em um documento separado.
Se o CSS estiver localizado separadamente, eles serão incluídos por meio da tag <link>. Ele precisa ser colocado dentro de <head> e </head>. Nesta marca, você precisa especificar o atributo href, que mostrará o endereço do arquivo com CSS.
Se os comandos forem compilados novamente em um arquivo separado,nós os conectamos ao documento da web via @import. Deve ser escrito entre as marcas <style> e </style>. Imediatamente após o <style>, colocamos a diretiva e entre colchetes, após a url, indicamos o link para o arquivo com CSS. Em ambos os casos, as regras se aplicarão a todo o documento.
Os dois métodos a seguir estão relacionados à situaçãoquando CSS é colocado diretamente no documento a ser "decorado". A folha de estilo neste caso pode estar entre os marcadores <style> e </style>. E a quarta forma envolve colocar regras na base de uma das tags, por meio do atributo style. Então, as regras afetarão um parâmetro separado que está dentro dos limites de um texto específico.
Os primeiros dois métodos introduziram folhas de estilo externas, enquanto o segundo introduziu folhas de estilo internas.
Para que são usadas as fontes?Obviamente, todo proprietário de site deseja que seu recurso não seja apenas bonito, mas também único. Eu gostaria de colocar elementos especiais nas páginas que pudessem se destacar de todas as outras. Além disso, você costuma ver cabeçalhos ou menus em grafias fora do padrão.
Existem muitas perguntas sobre isso.Talvez os webmasters tenham usado uma imagem desenhada no Photoshop. Talvez essa opção tenha aparecido graças ao Flash. Existe uma opção que usamos Javascript. Mas, como mostra a prática, a primeira opção é inconveniente e lenta, a segunda está desatualizada e a terceira é muito confusa. Para criar algo novo e bonito, você pode tentar adicionar fontes CSS.
Deve ser entendido que, em nosso caso, as fontes sãonão apenas um determinado estilo, mas também um conjunto de várias propriedades necessárias para controlar a aparência do texto. Você pode usar várias opções. Atribua uma fonte específica a um título, parágrafo, citação, corpo de texto, menu e muito mais.
Apesar de o usuário ter acesso a um enormeuma variedade de estilos, tamanhos, pesos, etc., é importante não se esquecer da legibilidade. Melhor evitar muita confusão de estilos diferentes. Duas fontes na página serão suficientes.
Ser capaz de escolher o estilofont use a família de fontes. É muito difícil entender de forma inequívoca se existe uma determinada fonte no PC do leitor de seu recurso, é melhor inserir todas as mesmas opções de tipo. Neste caso, o navegador escolherá entre eles aquele que se encontra no sistema do usuário.
Essa família tem vários significados. Por exemplo, o nome da família é representado pelo nome de uma família de fontes. O valor da família genérica define as cinco principais famílias de fontes.
A família de estilo de fonte é responsável pela seleção do estilo.Este estilo é herdado, assim como o anterior. Os significados incluem regular ou itálico e itálico. O estilo da variante da fonte é responsável por versaletes. Para saturação, use a espessura da fonte e assim por diante. A fonte pode ter um tamanho e uma cor atribuídos.
Além das fontes padrão, você pode usarsoluções não padronizadas. Eles são geralmente mais exclusivos e provavelmente você não os notará nos sites dos concorrentes. Você não precisa usar imagens, javascript e flash para isso. Será o suficiente para usar a regra @ font-face. Ele permite que o usuário carregue um arquivo externo em um documento.
Este método torna possível conectar uma fonte CSSOTF e TTF. Esses são formatos especiais que fazem um bom trabalho nisso. Os problemas só podem ocorrer com o navegador Internet Explorer. Embora ele tenha começado a usar fontes de terceiros em 1997, agora ele tem requisitos rígidos.
Ele faz muito para estragar seu trabalho. Muitas vezes, pode compactar um arquivo com uma fonte, às vezes pode criptografá-lo. Portanto, todos os tipos de hacks ocorrem.
Existem agora vários formatos de fonte queprecisa saber. Caso contrário, você enfrentará várias inconsistências e incompatibilidades. Você pode conectar a fonte CSS TTF. Este formato agora é compatível com todos os navegadores da web. Uma exceção pode ser o Internet Explorer versão 8 e inferior, bem como o Opera Mini 5.0-8.0.
Apenas o IE pode funcionar com EOT.A situação com WOFF é a mesma que com TTF. Mas o SVG funciona em navegadores Chrome até a versão 37, bem como Safari, iOS Safari, navegador Android. Como mostra a prática, é melhor usar TTF. Esta é a opção mais versátil e raramente causa problemas. É o mais comum.
Então, para conectar a fonte de um dosdos formatos acima, apenas use a regra @ font-face da qual falamos anteriormente. Para deixar claro, você precisa seguir um algoritmo específico. Você tem um arquivo de fonte chamado font.ttf. Para usá-lo para o texto principal, primeiro você precisa copiar o próprio arquivo na pasta onde todos os arquivos do site estão localizados.
Se quiser usar mais de uma fonte, você pode criar uma pasta especial aqui, onde irá carregá-los. Isso tornará muito mais fácil localizá-los e alterar o conteúdo dessa pasta.
Agora precisamos fazer o navegador baixar nossa fonte por conta própria. Para fazer isso, você precisa dar instruções a ele. Usamos a diretiva @ font-face. Nosso comando será semelhante a este:
@ Tipo de letra {
família da fonte: MyUniqueFont;
src: url ("fonts / font.ttf");
}
O comando font-family é responsável por garantir que a fonterecebeu esse nome e depois disso poderia ser usado para escrever o estilo. A segunda linha contém uma indicação do caminho onde o navegador deve encontrar o estilo e conectá-lo. Este não é um endereço universal. Este caminho será diferente dependendo de onde você colocou o arquivo de fonte. Isso mostrará como incluir uma fonte CSS de uma pasta.
Se você não sabe como conectar váriosFontes CSS, também há instruções sobre isso. Ele permite que você especifique vários arquivos de uma vez. Por exemplo, você pode conectar uma dúzia deles. Para fazer isso, você precisa usar a regra @ font-face já acima. Seguindo o exemplo de como você conectou anteriormente um arquivo da pasta, da mesma forma, a partir de uma nova linha, indique links para outras opções de fonte.
Se você tem um site WordPress,conectar estilos é ainda mais fácil. Quando você precisar alterar o estilo do título, você só precisa fazer o login no painel de administração. Lá, procure "Configurações do tema". Na seção "Tipografia", haverá uma lista completa de opções diferentes. Você só precisa selecionar e salvar a alteração.
Muitas vezes, para conectar fontes, eles usamServiço Google Fonts. É uma ferramenta popular para selecionar e conectar estilos. Existem muitos conjuntos de fontes aqui. Para conectá-los, basta acessar o site oficial.
Você verá uma lista completa com exemplos ea oportunidade de experimentar. Depois de adicionar o estilo desejado, não se esqueça de selecionar o alfabeto cirílico se o seu recurso estiver em russo. Em seguida, você pode escolher o tamanho, estilo ou escolher imediatamente várias opções para todas as ocasiões.
Depois disso, você terá pronto o código de que precisa.definido como arquivo CSS. Nesse caso, a regra de adição de métodos também se aplica. Por exemplo, se as folhas de estilo forem apresentadas em um documento separado, o comando será enviado para a primeira linha. Se você tiver folhas de estilo diretamente no arquivo HTML, será necessário adicioná-las ao corpo das tags <style> e </style>.
É fácil adicionar novas fontes ao seu site.É importante decidir imediatamente sobre os métodos e opções. Dependendo de qual sistema seu site está, você precisa pensar sobre essas ações. Se você tiver um recurso escrito por você mesmo, há poucas opções neste caso. Se, por exemplo, no WordPress, essa operação é muito mais fácil do que pode parecer.
