Nesta era de centenas de exibições, os web designers muitas vezes precisam considerar a experiência de navegação de diferentes clientes.
O tamanho do texto é uma parte importante da experiência do usuário. Diferentes resoluções, diferentes tamanhos de monitor, diferentes DPIs e até mesmo diferentes configurações do navegador terão impacto no tamanho final do texto exibido. Embora muitos navegadores agora possam ampliar facilmente a página, é sempre problemático para os usuários aumentar o zoom sempre que a visitam, sem mencionar que muitos usuários não sabem como ampliar a página. É melhor fornecer aos usuários um tamanho de fonte padrão mais atencioso com base em sua resolução. Então, qual é o tamanho apropriado para esse tamanho de fonte?
12px? 14px? 15px? 16px? Ou não deveríamos usar a unidade px?
A raiz do problema é que todas as unidades de tamanho de fonte (px, pt, em) na tela são unidades relativas e sozinhas não podem determinar o tamanho real do texto. Além do mais, a percepção fundamental das pessoas sobre o tamanho do texto depende da perspectiva dos olhos, que não depende apenas do tamanho físico do texto, mas também da distância do olho humano.
tamanho físico
Primeiro, assuma o tamanho do texto físico que desejamos atingir, por exemplo, definido como 16px em um monitor 1280 * 1024 de 17 polegadas. Calculado, sua altura é de aproximadamente 4,32 mm. tamanho, então qual tamanho de fonte deve ser exibido em diferentes resoluções?
Passo 1: Conte a resolução principal do usuário e o tamanho da tela correspondente.
Para converter entre tamanho físico e resolução, primeiro conte a resolução e o tamanho de tela correspondente. A distribuição das resoluções dos usuários pode ser obtida nos registros estatísticos do site. Como cada configuração de resolução pode corresponder a várias telas de tamanhos diferentes, e o tamanho da tela não pode ser obtido através da página web, temos que realizar uma análise estatística do mercado atual de monitores: para uma determinada resolução, contar as possíveis faixas de tamanho de tela, do menor ao maior, tamanho relativamente convencional (ou use o meio da faixa como tamanho principal). Como mostrado na imagem abaixo——
Mercado de monitores de computador (existem muitos tipos de produtos e é inevitável que um perca, os dados são apenas para referência)
Etapa 2: calcular a largura física dos tamanhos de tela convencionais para cada resolução
As proporções dos monitores atuais incluem não apenas telas padrão 4:3, telas widescreen 16:10, mas também proporções mais irregulares. Para comparar monitores com proporções diferentes, as resoluções horizontais são usadas para estatísticas. Use o tamanho principal e a proporção (assumindo que o comprimento e a largura dos pixels sejam iguais) para calcular a largura da tela (polegadas) e, em seguida, converta-a para o sistema métrico (milímetros). tendência do tamanho da tela. Combinados com a distribuição do usuário de cada resolução, os resultados são mostrados na figura abaixo (cada ponto da imagem corresponde a uma resolução, o eixo horizontal é o número de pixels na direção horizontal da tela, o eixo vertical é o largura física da tela e o tamanho da bolha indica o uso desta resolução O número de usuários A bolha azul indica tela padrão e a roxa indica tela ampla): as três maiores bolhas são 1024*768, 1280*1024 e. 1280*800.
Passo 3: Calcule o tamanho da fonte em diferentes monitores
Divida a largura física da tela pela largura do pixel para obter a largura de cada pixel. Em seguida, divida esse número pelo tamanho físico especificado do texto para obter o tamanho de fonte necessário em diferentes resoluções. Por exemplo, para exibir texto quadrado de 4,32 mm, são necessários os seguintes tamanhos de fonte em cada resolução (calculados separadamente para notebooks e desktops):
Tamanhos de fonte necessários em diferentes resoluções
Pode-se observar que os tamanhos de notebooks e desktops são muito diferentes. Por conveniência, o tamanho principal ou tamanho médio de cada resolução é usado para calcular o tamanho de fonte necessário para o tamanho de fonte especificado em cada resolução. (A imagem a seguir remove as resoluções que são basicamente usadas apenas em notebooks), tomando 4,32 mm, 3,77 mm e 3,25 mm como exemplos (fontes de tamanho 16, 14 e 12 com resolução 1280*1024 de 17 polegadas):
Para manter um tamanho físico fixo, a relação entre o tamanho da fonte necessária e a resolução em cada exibição principal
Como algumas fontes chinesas não são exibidas bem em números não pares quando o cleartype não está ativado, geralmente é recomendado usar números pares como 12, 14, 16, 18 e 22px. Ou seja, selecione o número par mais próximo para uma determinada resolução. Por exemplo: 14px é usado para resoluções horizontais de tela abaixo de 1100, 16px é usado para 1100 a 1500, 18px é usado para telas acima de 1500 e assim por diante.
distância ao olho humano
Embora o tamanho da fonte dos notebooks seja muito menor do que o dos computadores desktop, na verdade isso não nos traz tantos inconvenientes. Isso ocorre porque a distância entre o olho humano e a tela é geralmente menor ao usar notebooks do que ao usar computadores desktop. Quando os netbooks ficam cada vez menores (o exemplo extremo são os telefones celulares), as pessoas podem segurá-los mais próximos ao usá-los, de modo que o ângulo de visão seja maior. Pelo contrário, quando o ecrã se torna cada vez maior (24 polegadas ou até maior), devido a considerações como o ângulo de visão geral, as pessoas também podem afastar-se mais do ecrã, reduzindo assim o ângulo de visão.
Falando quantitativamente: como o tamanho do texto h (4~5mm) é muito pequeno em relação à distância d (30~60cm) entre o olho humano e o texto, pode-se considerar aproximadamente que o ângulo de visão θ é proporcional a h e inversamente proporcional a d (θ≈tgθ=h/ d). Em outras palavras, um texto do mesmo tamanho só aparecerá com metade do tamanho quando estiver a meio metro de distância dele.
Em outras palavras, o monitor só pode transmitir um tamanho aproximado, e cada usuário ainda ajustará o efeito real que vê ajustando inconscientemente a distância da tela durante operações específicas. Enfrentando cada vez mais usuários de laptop (consulte o artigo anterior: Participação no mercado de laptops), os designers front-end só podem fornecer um efeito de página com base no tamanho médio de laptops e desktops, e isso depende dos usuários se ajustarem.
Use JS para ajustar automaticamente o tamanho da fonte em diferentes resoluções
Por exemplo, o id do div onde o corpo da página da web está localizado é content——
Nota: Para garantir que o texto possa ser dimensionado em cada navegador, a unidade de tamanho da fonte usa em em vez de px. De modo geral, o padrão do navegador é 1em=16px e 0,875em1em1,125em é 1416. 18px.
Observe ao usar a escala de tamanho de fonte: É melhor usar porcentagens em vez de tamanhos de fonte fixos para unidades de tamanho de fonte, como títulos dentro do div, para que possam ser dimensionados de forma síncrona com o texto.
Anexo: Principais dados citados nos gráficos deste artigo
Publicado pela primeira vez neste site: http://www.mhzx1.com