Propriedade CSS unicode-range - Uso e Exemplos

O descritor unicode-range define o intervalo específico de caracteres que uma fonte, especificada pela at-rule @font-face, pode fornecer. É um descritor, não uma propriedade autônoma: só faz sentido dentro de um bloco @font-face, onde restringe quais pontos de código Unicode aquele arquivo de fonte específico é usado.

O navegador usa esse intervalo como uma dica de download. Se a página não utilizar nenhum caractere do intervalo, o arquivo de fonte não é baixado de forma alguma. Se ao menos um caractere do intervalo aparecer na página, o arquivo de fonte completo é baixado. Isso torna o unicode-range a base do subsetting de fontes — servindo um arquivo de fonte pequeno por script (Latino, Cirílico, Grego, etc.) e buscando apenas os que a página realmente precisa. Quando o @font-face não é suportado, as fontes de fallback na sua lista font-family são usadas no lugar.

Aviso

Os pontos Unicode são precedidos por U+ seguido de até seis caracteres que formam o código do caractere. Pontos ou intervalos que não possuem esse formato são considerados inválidos e farão a propriedade ser ignorada.

Existem muitos blocos Unicode para escolher. O Basic Latin (U+0020-007F) cobre as letras padrão do inglês, dígitos e pontuação, sendo o intervalo mais comum para sites em língua inglesa.

Valor Inicial	U+0-10FFFF
Aplica-se a	O bloco @font-face no qual a propriedade está incluída.
Herdado	Sim.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.unicodeRange = "U+0025-00FF";

Sintaxe

Valores do descritor CSS unicode-range

unicode-range: single codepoint | codepoint range | wildcard range | initial | inherit;

Exemplo do descritor unicode-range:

Exemplo de código do descritor CSS unicode-range

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-face {
        font-family: 'MyFont'; /* Define the custom font name */
        src: url('myfont.woff2') format('woff2'), 
             url('myfont.woff') format('woff'); /* Define the font source */
        unicode-range: U+00-FF; /* Define the available characters */
      }
      div {
        font-size: 3em;
        font-family: MyFont, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>Unicode-range descriptor example</h2>
    <div>Mary & Jack are friends.</div>
  </body>
</html>

Experimente Você Mesmo »

Múltiplas regras @font-face para subsetting de fontes

O principal caso de uso do unicode-range é dividir uma fonte em subconjuntos para reduzir o tamanho do download. Cada subconjunto define um intervalo específico de caracteres:

@font-face {
  font-family: 'MyFont';
  src: url('myfont-latin.woff2') format('woff2');
  unicode-range: U+00-FF; /* Basic Latin */
}
@font-face {
  font-family: 'MyFont';
  src: url('myfont-cyrillic.woff2') format('woff2');
  unicode-range: U+0400-04FF; /* Cyrillic */
}

O navegador baixa apenas o subconjunto que contém os caracteres usados na página. Observe que todos os subconjuntos compartilham o mesmo nome font-family — é isso que permite ao navegador tratá-los como uma única fonte lógica dividida em vários arquivos.

Intervalos com curinga

O curinga ? representa qualquer dígito hexadecimal único, sendo uma forma compacta de expressar um bloco inteiro. Estas três declarações são equivalentes:

unicode-range: U+0000-00FF; /* explicit range */
unicode-range: U+00??;      /* wildcard: U+0000 to U+00FF */
unicode-range: U+0-FF;      /* leading zeros are optional */

Você também pode listar vários intervalos, separados por vírgulas:

/* Basic Latin + Latin-1 Supplement + the euro sign */
unicode-range: U+0000-00FF, U+0131, U+20AC;

Suporte dos navegadores

O unicode-range é suportado em todos os navegadores modernos (Chrome, Firefox, Safari e Edge). Como afeta apenas qual arquivo de fonte é baixado, navegadores que não o reconhecem simplesmente baixam a fonte normalmente — portanto, degrada graciosamente e é seguro de usar em qualquer lugar.

Valores

Valor	Descrição
single codepoint	Um ponto de código de caractere Unicode representado na forma de um a seis dígitos hexadecimais.
codepoint range	Um intervalo de pontos de código Unicode representado na forma de dois pontos de código Unicode separados por hífen. Especifica o início e o fim de um intervalo.
wildcard range	Um intervalo de pontos de código Unicode contendo caracteres curinga, usando o caractere `?` para indicar qualquer dígito hexadecimal (ex.: `U+00??`).
initial	Define a propriedade com seu valor padrão.
inherit	Herda a propriedade do seu elemento pai.

Prática

O descritor CSS unicode-range define o intervalo específico de caracteres a ser usado de uma fonte definida por

@font-family@font-face@font-weight