Os tipos de exibição de texto em um site
O site que você está construindo pode conter dois tipos de texto: texto gráfico (que é realmente apenas uma imagem) e um texto HTML (que é, quer no código HTML ou provenientes de um banco de dados). texto HTML também é chamado viver
Menu
O texto gráfico contra o texto HTML
Enquanto o texto ao vivo dá-lhe mais flexibilidade para editar e atualizar, tem limitações. Suas escolhas de fontes e efeitos visuais são relativamente limitadas, e você deve contar com boa codificação para garantir que o seu texto parece o mesmo em todos navegadores, plataformas e dispositivos. O texto gráfico, no entanto, é apenas uma imagem - essencialmente uma imagem do texto. Portanto, você pode aplicar qualquer tipo de letra que você tem em sua caixa de ferramentas - e qualquer tipo de efeito - para criar um título bacana. Enquanto isso parece ótimo, texto ao vivo é o vencedor claro quando se trata de web - porque a capacidade de editar e atualizar o texto supera em muito a capacidade de olhar fresco. Além disso, o texto ao vivo tem a vantagem de tornar sua página mais porque os motores de busca podem ler o que diz-friendly pesquisa.
localização de idioma em web design
Outra razão, faz sentido usar o texto ao vivo para todos os elementos de cópia é porque muitos sites precisam levar em conta para o idioma localização (Linguagem de tradução). Se você está desenvolvendo um site que irá suportar vários idiomas e conjuntos de caracteres, você não pode dar ao luxo de usar qualquer texto gráfico (sem contar com o texto que faz parte da fotografia e de conteúdos gráficos, como uma imagem apoiando um artigo). É muito mais prático para manter um banco de dados de componentes de cópia ao vivo traduzido para todos os idiomas que suportam, e dinamicamente preencher suas páginas com o conteúdo certo com base no país e idioma que um usuário selecionado.
especificações de fontes em web design
No passado, o texto de produção foi limitado a exibir em fontes do sistema chatas. Existem maneiras diferentes agora para utilizar fontes personalizadas em seus desenhos website. Um dos primeiros métodos foi sIFR (salable EuNman Fchicote Replacement), uma solução de código aberto projetado para substituir frases curtas (como manchetes), sobrepondo o texto original com um filme do Flash que exibe o texto na fonte personalizado atribuído. A substituição acontece em um piscar de olhos, mas requer que o Flash está instalado no navegador. Lembre-se, Flash não funciona em dispositivos móveis da Apple.
Agora, a maioria dos designers estão usando o @Tipo de letra método de CSS, ou um serviço de incorporação de tipo para expandir a variedade de fontes disponíveis para o texto ao vivo. Designers vai usar essas fontes personalizadas para frases curtas, navegação e manchetes, mas muitas vezes ficar com as fontes do sistema padrão, como Arial ou a Geórgia para cópia de corpo. À medida que essas tecnologias de incorporação de fontes instalar-se e navegadores alargarem o seu apoio para eles, a tendência provavelmente se deslocará para a utilização de fontes todo-personalizadas em sites tradicionais e sites móveis.
Tenha um plano font-fallback
Mesmo se você estiver usando uma tecnologia de incorporação-fonte, sempre que você especificar uma fonte em HTML ou CSS, você está assumindo que a fonte pode ser encontrado. Se o servidor que aloja o seu tipo de letra incorporado está em baixo, ou o navegador do usuário não suporta o formato de fonte, a fonte não será exibido corretamente. Se você estiver usando fontes do sistema padrão, e por qualquer motivo o utilizador não tem os que você especificar, a página não será exibido corretamente. O navegador vai encontrar uma fonte substituta. Isso pode causar estragos em seu layout de página e design, porque, como você deve saber, fontes variam muito em tamanho e largura - mesmo quando definido para o mesmo tamanho de ponto.
navegador | Formatos de fontes suportados | Extensões de arquivo de fonte |
---|---|---|
Internet Explorer | Embedded OpenType Web Open Font Format | .EOT .woff |
Mozilla (Firefox) | OpenType Font TrueType Font Web Open Font Format | .OTF .ttf .woff |
Safari e Opera | OpenType Font TrueType Font Scalable Vector Graphics Web Open Font Format | .OTF .ttf .SVG .woff |
cromada | OpenType Font TrueType Font Scalable Vector Graphics Web Open Font Format | .OTF .ttf .SVG .woff |
dispositivos móveis da Apple (Safari) | Scalable Vector Graphics OpenType Font TrueType Font | .SVG .OTF .ttf |