A unicode-rangepropriedade em CSS é usada pelo @font-facepara definir os caracteres que são suportados pela face da fonte.
@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ unicode-range: U+00-FF; /* Define the available characters */ )Em outras palavras, @font-facefará referência à propriedade e determinará se deve ou não fazer o download e usar a fonte com base nos caracteres ou intervalo de caracteres que correspondem aos do documento HTML.
Face da fonte: Ei, HTML, algum dos caracteres a seguir corresponde ao que está na página?
HTML: Sim, um monte deles faz.
Font-Face: Ótimo, aqui está um arquivo de fonte que você deve baixar para exibir esses caracteres.
A distinção semântica importante que devemos destacar aqui é que unicode-rangedetermina para quais caracteres uma fonte pode ser usada, em vez de para quais caracteres uma fonte está disponível para uso. Em outras palavras, se declararmos um unicode-rangeon @font-facee os caracteres carregados em um documento HTML corresponderem a esse intervalo, a fonte será baixada e colocada em uso.
Você pode imaginar os benefícios de desempenho que surgem com essa propriedade. Por exemplo, podemos carregar uma fonte personalizada apenas se ela acomodar caracteres específicos, em vez de sempre carregar a fonte em todas as situações.
Existe até uma maneira de combinar dois @font-faceconjuntos na mesma font-facedeclaração de propriedade, graças a um truque útil compartilhado por Jake Archibald. A ideia é que um @font-faceconjunto substitua o outro com base na correspondência unicode-range, otimizando o desempenho ou simplesmente aprimorando a tipografia em uma página.
Valores
Qualquer código de caractere Unicode ou intervalo é um unicode-rangevalor aceitável . Você notará que os pontos Unicode são precedidos por um U+seguido por até seis caracteres que constituem o código do caractere. Pontos ou intervalos que não seguem este formato são considerados inválidos e farão com que a propriedade seja ignorada.
- Caractere único (por exemplo
U+26) - Faixa de caracteres (por exemplo
U+0025-00FF) - Intervalo de curinga (por exemplo
U+4??)
O Wildcard Range é o mais complicado do grupo. Cada ?um representa um curinga onde qualquer valor corresponderá. Você pensaria que isso significa que você pode caracterizar a coisa toda com algo assim:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+??????; /* This does not work! */ )No entanto, isso não funcionará. O motivo é que liderar com ?implica em um código de caractere que começa com 0, o que significa que até cinco caracteres de ponto de interrogação podem ser usados, apesar de os unicodes aceitarem até seis caracteres no total.
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); unicode-range: U+?????; /* This works and is equivalent to U+0????? */ )Existem inúmeras opções de Unicode por aí. Latim básico ( 0020-007F) é provavelmente o intervalo mais comum para sites em inglês, mas unicode-table.com fornece uma lista abrangente de todos os intervalos disponíveis com códigos para caracteres específicos.
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 36 | 44 | 11 | 17 | 10 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |
Leitura Adicional
- Especificação de nível 3 do módulo de fontes CSS
- Tabela Unicode: um recurso para fazer referência a conjuntos de caracteres e códigos Unicode.
- Usando @ font-face: Postagem CSS-Tricks cobrindo como
@font-facefunciona com diferentes técnicas e exemplos de trabalho. - Qual é o problema de declarar propriedades de fonte em @ font-face ?: Postagem do CSS-Tricks relacionada a como os valores correspondentes nas propriedades da fonte podem ser usados para determinar se uma fonte personalizada é baixada e usada pelo navegador.