Vlad Merzhevich

A fonte é parte integrante do web design, confere expressividade e reconhecimento ao site, expressa o estilo característico do site e está diretamente relacionada à percepção dos textos. Uma fonte bem escolhida pode não ser notada, mas sem ela não haverá aquele toque que torna o design do site completo.

Se você já tem uma fonte específica instalada em seu computador, então nos estilos basta adicionar uma linha.

h1 (família de fontes: SuperPuperFont;)

O valor da propriedade font-family é o nome da fonte, ele será aplicado a todos os cabeçalhos

... Mas o que os visitantes do site verão se não tiverem nossa fonte espetacular e rara instalada? Esta situação é mais provável, portanto, se o navegador não reconhecer a fonte declarada, ele usará a fonte padrão, por exemplo, no Windows é Times New Roman. Todo o nosso design de tipo cuidadosamente pensado desmoronará durante a noite, então precisamos procurar a solução mais versátil. A primeira coisa que vem à mente imediatamente é organizar o download do arquivo da fonte para o computador do usuário e exibir o texto na fonte selecionada. Comparado a outros métodos, como exibição de texto por meio de uma imagem, esse método é o mais simples e versátil.

Quais são as vantagens de baixar um arquivo de fonte e aplicá-lo via CSS.

• O texto é fácil de adicionar e editar.
• No navegador, você pode usar a pesquisa e encontrar as frases desejadas.
• Nas configurações do navegador, você pode diminuir ou aumentar o tamanho da fonte para obter uma visualização confortável.
• Motores de busca indexa bem o conteúdo do documento.
• O texto pode ser selecionado e copiado para a área de transferência, bem como traduzido para outro idioma.
• Parâmetros de texto como espaçamento de linha, cor, tamanho e outros são fáceis de alterar usando as propriedades CSS.
• Novamente, por meio do CSS, você pode simplesmente adicionar diferentes efeitos ao texto, por exemplo, uma sombra.

Como você pode ver, existem muitas vantagens. Existem algumas desvantagens menores e vale a pena mencionar para o equilíbrio.

• Nem todas as versões do navegador suportam a fonte para download e o mesmo formato para todos.
• O arquivo contendo a fonte pode ocupar grande volume retardando assim o carregamento da página da web.

Mesa 1 lista as versões do navegador e os formatos de fonte que eles suportam.

Aba. 1. Formatos suportados

Formato	Internet Explorer	cromada	Ópera	Safári	Raposa de fogo	Android	iOS
TTF	9.0+	4.0+	10.0+	3.1+	3.5+	2.2+
EOT	5.0-8.0
WOFF	9.0+	5.0+			3.6+
SVG		1.0+	9.0+	3.1+	3.5+		1.0+

O formato mais compatível é TTF. Com exceção do IE até a versão 9.0 e iOS, todos os navegadores o entendem perfeitamente. Então, se você tem uma fonte neste formato e está direcionando navegadores modernos, nenhuma ação adicional é necessária. Basta escrever o seguinte código em estilos (exemplo 1).

Exemplo 1. Conectando TTF

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Primeiro, carregue o próprio arquivo de fonte usando a regra @ font-face. Dentro dele, escrevemos o nome do tipo de letra usando o parâmetro font-family e o caminho para o arquivo usando src. Em seguida, usamos a fonte como de costume. Portanto, se precisarmos definir a fonte para o título, então para o seletor h1, conforme mostrado no exemplo, definimos a propriedade font-family com o nome da fonte carregada. Para versões mais antigas do IE, listamos substitutos separados por vírgulas. V este caso a fonte do título será "Comic Sans MS", pois o IE8 e versões anteriores não suportam o formato TTF.

O resultado deste exemplo é mostrado na Fig. 1

Arroz. 1. Cabeçalho com a fonte baixada

E se você precisar de uma fonte ornamentada no IE8? Felizmente, @ font-face permite incluir vários arquivos de fontes ao mesmo tempo. formatos diferentes... O navegador só precisa escolher o apropriado. Assim, uma solução universal que funciona em todos os navegadores se resume em converter o formato TTF existente para EOT e, em seguida, conectar os dois arquivos.

Para conversão, existem vários serviços online que permitem baixar um arquivo TTF e obter um arquivo EOT na saída. Infelizmente, a maioria desses serviços tem o mesmo problema - recebemos o arquivo, mas o idioma russo não é compatível. Como resultado, o resultado desejado não é alcançado, a conversão está incorreta. Entre os sites que verifiquei, havia um que exibia o texto corretamente no IE.

Acesse este site, carregue o arquivo TTF e pressione o botão "Converter TTF em EOT", após o qual salvamos o arquivo resultante na pasta de fontes. Existe um pequeno truque nos estilos para forçar diferentes navegadores a carregar a fonte no formato correto. Para fazer isso, adicione dois parâmetros src. O primeiro aponta para o arquivo EOT e é para versões anteriores do IE. O segundo parâmetro src deve conter dois endereços separados por vírgulas, um dos quais aponta para um arquivo TTF. O fato é que o IE versão 8.0 e anterior não entende a vírgula no parâmetro src e, portanto, irá ignorar o parâmetro totalmente. Pode haver várias opções de grafia, por exemplo, repetir url, especificar o nome da fonte dentro do parâmetro local ou escrever uma fonte inexistente. Se o navegador não puder carregar essa fonte, ele irá para a segunda fonte da lista, e nós a escrevemos corretamente. Formas aceitáveis ​​de escrita.

src: url (fonts / pompadur.ttf), url (fonts / pompadur.ttf);
src: local (pompadur), url (fonts / pompadur.ttf);
src: local ("bla bla"), url (fonts / pompadur.ttf);

Uma opção funcional para conectar uma fonte para todas as versões de navegadores é mostrada no exemplo 2.

Exemplo 2. Conectando EOT

HTML5 CSS3 IE Cr Op Sa Fx

Um elemento moderno do processo político

Na verdade, a doutrina política de Montesquieu conduz o tipo de cultura política continental-europeia, que se refletiu nas obras de Michels.

Quanto ao iOS, parece-me que não faz muito sentido fazer e baixar uma fonte separada no formato SVG. A audiência dos sites que navegam pelo iOS ainda é pequena, além disso, a versão do site está abaixo dispositivos móveis estão tentando torná-lo mais fácil e não é aconselhável carregar várias dezenas de kilobytes adicionais.

Fontes da web do Google

Um serviço conveniente que assume a rotina de suporte a diferentes formatos de fonte e versões de navegador pode ser encontrado em www.google.com/webfonts... Embora existam relativamente poucas fontes diferentes na coleção (há várias dezenas delas), todas são de altíssima qualidade e podem ser usadas gratuitamente em sites.

Antes de escolher uma fonte, mude o valor de Script para Cirílico, então você verá uma lista de fontes que suportam russo (Fig. 2).

Arroz. 2. Seleção de fontes no Google Web Fonts

A fonte desejada deve primeiro ser adicionada à coleção clicando no botão "Adicionar à coleção" e, em seguida, no botão "Usar" no canto inferior direito da tela. Sobre próxima página(fig. 3) você pode finalmente escolher as fontes que deseja. Deve ser entendido que uma fonte pode conter vários estilos, e cada um deles aumenta o volume dos arquivos baixados.

Arroz. 3. Fontes carregadas na página

Você pode conectar as fontes selecionadas usando um dos três caminhos, o código adicionado pode ser copiado para baixo na página.

1. Por meio do elemento ... A linha será semelhante à seguinte.

2. Por meio da regra @import. Inserimos esta linha em nosso arquivo CSS no topo.

@import url (http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. Por meio de JavaScript.

Basicamente, todos os caminhos são iguais, então escolha de acordo com sua preferência.

Benefícios do aplicativo este serviço tal.

• As fontes são gratuitas, você não precisa pagar por elas.
• As fontes oferecidas são "aguçadas" para visualização na tela, os arquivos são otimizados e ocupam um volume relativamente pequeno.
• O navegador é detectado automaticamente e uma fonte no formato necessário é exibida para ele.

Uma das principais vantagens do serviço é que as fontes são armazenadas nos formatos TTF, EOT, WOFF, SVG e carregadas após verificação no navegador. Portanto, o formato EOT estará disponível apenas para versões anteriores do IE.

Usar ou não o Google Web Fonts é com você. Se você não encontrou uma fonte adequada lá, você sempre pode conectar o popular e difundido TTF. Além disso, é suportado últimas versões todos os navegadores populares.

// echo get_the_post_thumbnail (get_the_ID (), "relatedthumbnail"); // exibe o tamanho da minha miniatura?>

Neste tutorial, analisaremos como incluir fontes da web no layout. As fontes da Web são fontes complementares usadas para tornar os designs mais exclusivos ou variados. Conectar a fonte na página - garante sua exibição correta em todos os navegadores, e não importa se o usuário a instalou ou não.

Como conectar uma fonte do Google Fonts

Etapa 1 - escolha uma fonte

Serviço Fontes do Google tem um grande conjunto de fontes da web que podem ser conectadas ao projeto em uma linha e imediatamente usadas em Estilos CSS... Para selecionar apenas fontes Cirílico para visualização, no filtro à esquerda no parâmetro Script, você deve selecionar o valor Cirílico (para Cirílico) ou Cirílico Estendido (para Cirílico estendido). Depois disso, as fontes que suportam o cirílico serão mostradas à direita.

Para uso rápido, clique no botão Uso rápido.

Etapa 2 - ajustar as configurações de fonte

Na próxima página, escolheremos quais tipos de fontes usaremos. O OpenSans tem 10 pesos, de muito fino a extra negrito. Quanto mais estilos forem selecionados, mais afetará a velocidade de carregamento da página. Portanto, vale a pena conectar apenas as fontes que são utilizadas. Depois disso, você pode selecionar conjuntos de caracteres, para cirílico escolhemos Cirílico estendido ou Cirílico e latino.

Etapa 3 - código para conectar a fonte

Em seguida, pegamos uma linha de código para conectar ao seu site. Opção padrão - conectar um arquivo css de terceiros a partir de html, na guia @import - haverá uma string para conexão por meio de um arquivo css e uma terceira opção para Javascript. Depois disso, a conexão está pronta e você pode usar este tipo de letra no layout. O bloco abaixo mostra um exemplo de como acessar uma fonte: font-family: "Open Sans", sans-serif;

Defina a largura usando o parâmetro de espessura da fonte: 300; ou espessura da fonte: 400; peso da fonte: 800; Itálico - através do estilo da fonte: itálico; ...

Exemplo de uso

Como resultado, se escolhermos conectar a fonte por meio de @import no CSS, nosso arquivo CSS terá a seguinte aparência:

/ * Conexão de fonte * / @import url (http://fonts.googleapis.com/css?family=Open+Sans:400,700italic,300&subset=cyrillic-ext,latin); / * Defina o estilo do cabeçalho h1 * / h1 (/ * Selecione a fonte conectada "Open Sans" como a fonte * / font-family: "Open Sans", sans-serif; / * Selecione o tamanho da fonte 300 , que corresponderá à fonte Light - para tamanho fino * / espessura da fonte: 300;)

Saudações, queridos leitores. Hoje vamos falar sobre as fontes da web do google, como fazer o download e se conectar ao site.

Vá para o site www.google.com/fonts/, no filtro à direita, selecione: 1. a categoria desejada, 2. se necessário, classifique-as e 3. selecione o idioma de que precisamos (se precisar de uma fonte russa no menu à esquerda, selecione Cyrillik).

Portanto, selecionamos a fonte, agora precisamos selecionar seu estilo, para isso expandir o painel abaixo ( Abrir gaveta de seleção) e vá para a guia CUSTOMIZAR e selecione os estilos e idiomas desejados.

Para baixar, clique no botão donwload.

Conectando a fonte baixada

Copie as fontes contidas no arquivo para a pasta / fonts, que deve estar no mesmo diretório que a pasta / css do seu site HTML.

Conexão padrão de fontes baixadas se parece com isso

@ font-face (font-family: "Font_name_any"; src: url ("Font_file_name.eot"); src: url ("Font_file_name.eot? #iefix") format ("embedded-opentype"), url ("Font_file_name .eot .woff ") format (" woff "), url (" Font_file_name.ttf ") format (" truetype "), url (" Font_file_name.svg # DSNoteRegular ") format (" svg "); font-weight: normal ; estilo da fonte: normal;)

No meu caso, a conexão ficará assim

/ * Código para conectar uma fonte no formato /css/style.css * / @ font-face (font-family: "RobotoRegular"; url ("../ fonts / RobotoRegular.ttf") formato ("truetype"); fonte - estilo: normal; peso da fonte: normal;)

Para conectar a fonte de sua escolha ao site, acesse a guia EMBUTIR, lá você verá 2 métodos de conexão:

1. PADRÃO

Este código precisa ser adicionado à seção seu documento HTML.

2. @IMPORT

@import url ("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

Importante. Independentemente do método de conexão, use as seguintes regras CSS para definir essas famílias: font-family: ‘Roboto’, sans-serif; mais sobre isso abaixo.

Olá pessoal! Você pode ler sobre o que escrevi na lição 132. E neste artigo, vou dizer como você pode conectar uma fonte de forma rápida e fácil ao seu site a partir do Google Fonts. No serviço Google Font, você precisa escolher uma fonte para o seu site e, em seguida, conectá-la.

Não é necessário fazer upload do arquivo de fonte para a hospedagem. Basta escrever o código HTML necessário no cabeçalho do site e no nome da nova fonte. As fontes podem ser conectadas não apenas a um site WordPress, mas também a qualquer outro site.

Como conectar as fontes do Google ao seu site

Vamos para Serviço Google Fonte neste link e selecione a fonte necessária.
As fontes podem ser selecionadas por meio de um filtro. Ou seja, definimos os parâmetros e, assim, o serviço encontra as fontes com os parâmetros selecionados.

Você pode definir outros parâmetros, se necessário: espessura (espessura da fonte), inclinação (itálico), largura (largura da fonte).

Você também precisa selecionar o alfabeto cirílico se o seu site for em russo: cirílico (cirílico) ou cirílico estendido (cirílico estendido).

Quando os parâmetros são selecionados, o serviço mostrará todas as fontes que estão disponíveis com eles.

Movemos o cursor do mouse sobre a fonte que queremos instalar no site, após o qual configurações / parâmetros adicionais aparecem: Uso rápido ( uso rápido), Abrir uma janela (visualizar fonte em janela separada) e Adicionar à coleção.

Nós escolhemos " Uso rápido"E ver de lado direito widget na forma de um velocímetro. Mostra a rapidez com que a fonte selecionada está carregando. Quanto menor o número neste velocímetro, melhor.

Abaixo você pode escolher uma das três opções de instalação da fonte no site: standart, @import ou javascript.

Cada opção possui instruções para língua Inglesa como conectar corretamente a fonte ao site. Eu vou te mostrar a primeira opção " padrão"Porque é mais simples.

Copie a linha destacada em vermelho e cole-a no arquivo header.php entre as tags ….

Em seguida, abra a folha de estilo style.css, encontre a fonte que precisa ser alterada e escreva uma nova. Apenas escrevemos o nome da nova fonte. Coloque Google Fonts entre aspas, por exemplo, font-family: "Aladin", Arial, Helvetica, Sans-serif.

Se você não entendeu nada do que eu te falei aqui, assista ao vídeo onde te conto em detalhes, Como conectar o Google Font ao site WordPress

______________________
Para a lição 204. e sem um plugin

Patrocinador do material.
Ar condicionado na loja online http://www.technodom.kz/catalog/konditsionery. Ar condicionado - melhores bens, empréstimos, ampla seleção, serviço impecável.

Boa tarde, queridos leitores. Todos vocês provavelmente sonham em tornar os seus próprios sites ou os de seus clientes mais concisos e atraentes.

Um dos principais fatores responsáveis ​​pela percepção das informações do site são as fontes e a forma como as usamos em conjunto. Como em um site, dois ou mais tipos de fontes são usados ​​com mais frequência, por exemplo, para cabeçalhos e apenas o corpo do texto.

Uma das possibilidades de melhorar visualmente a legibilidade dos textos é conectar fontes de terceiros. Afinal, todo mundo provavelmente sabe o que é uma coleção padrão "pobre" de fontes cirílicas no Windows, que é responsável por exibir texto no navegador.

Fontes padrão:

Cufon e @ font-face

Já escrevi sobre, com o qual você pode conectar fontes não padrão ao site. Agora vamos ver uma maneira mais fácil - essa é a regra @ font-face em css e carregar a própria fonte da loja Google Fonts.

Toda a diferença entre Cufon e @ font-face é que o primeiro usa js para emular a fonte e desenha símbolos por seus próprios meios, enquanto @ font-face baixa a própria fonte para o computador do visitante e o navegador já a usa para exibir o texto.

Em qualquer caso, Cufon e @ font-face diminuem a velocidade de carregamento do site, embora não significativamente.

Uso de fontes do Google no site

Não vou pintar muito e por muito tempo darei um exemplo específico de conexão do Google Fonts, usando este blog como exemplo.

Como você pode ver, os títulos e subtítulos dos meus artigos são feitos em uma fonte fora do padrão, então agora, na prática, mostrarei como fazer isso, e você tentará em seus sites por analogia.

Escolhendo uma fonte no repositório

Para não ter medo, vou explicar - um repositório é um repositório, mas de uma forma burguesa :). E então, vamos para http://www.google.com/fonts/ e procurar uma fonte adequada para nós:

Não há muito no menu:
À esquerda, como você pode ver, há um bloco com todos os tipos de filtros de busca de fontes, no qual você pode selecionar, por exemplo, apenas fontes latinas ou cirílicas. E ainda por cima, as configurações para a exibição de exemplos, que são divididos em 4 guias:

• Palavra- exibição de várias letras. Nesse modo, é conveniente comparar várias fontes de uma vez e ver a aparência de caracteres específicos;
• Frase- exibir na forma de uma frase;
• Parágrafo- um grande pedaço de texto é exibido, o que permitirá que você compare visualmente a fonte que já está no próprio texto;
• Poster- os títulos são exibidos, este método de comparação é conveniente para escolher a fonte que será usada nos títulos.

Conectando a fonte ao site

Em seguida, no painel Coleção, que fica na parte inferior, vá até a aba Usar, que é responsável por utilizar as fontes de sua coleção. Aqui você verá imediatamente que o Google mostra o quanto a velocidade de carregamento da página se deteriorará:

Abaixo está um painel com a opção de "tipo de exibição", selecione latim (latim) e cirílico (cirílico), o que nos dará a capacidade de exibir letras latinas e cirílicas:

Depois disso, passamos para o terceiro item desta página, ou seja, a própria conexão. O Google nos oferece três opções para incorporar suas fontes - via js, maneira padrão via conexão para e @import no arquivo css. Estou usando o último método.

Abrimos nosso arquivo css e escrevemos a linha que o google nos forneceu:

É isso, conectamos a fonte do Google Fonts ao site, agora como usar?

Uso em CSS

Tudo é muito simples, depois de conectarmos a fonte via @import, precisamos nos cadastrar instrução padrão para aquelas classes e indicadores para os quais nossa nova fonte será usada. Por exemplo:

h1, h2, h3 (família da fonte: 'Cuprum', sans-serif;)

Depois de todas essas manipulações, você terá cabeçalhos com uma nova fonte fora do padrão.

Só isso, obrigado pela atenção e até breve.