Propriedade CSS font-variant-east-asian

A propriedade CSS font-variant-east-asian controla o uso de glifos alternativos para scripts do Leste Asiático, como chinês, japonês e coreano (CJK). Ela permite selecionar entre formas de caracteres históricas ou regionais (por exemplo, chinês tradicional vs. simplificado, ou diferentes padrões JIS japoneses) e controlar a largura dos algarismos — tudo sem alterar o texto subjacente.

É uma das propriedades do CSS3 e uma das propriedades individuais que compõem a propriedade abreviada font-variant.

Por que usá-la

Um único ponto de código Unicode pode ser renderizado com vários glifos diferentes na tipografia do Leste Asiático. O mesmo caractere pode ter uma forma histórica (tradicional) e uma forma moderna (simplificada), e as fontes japonesas frequentemente incluem glifos que seguem um padrão JIS específico (jis78, jis83, jis90, jis04). font-variant-east-asian instrui a fonte a escolher a variante apropriada a partir de seus recursos OpenType, para que você mantenha os caracteres originais na marcação enquanto exibe a forma desejada.

Use quando:

Você exibe texto em chinês e deseja forçar as formas tradicional ou simplificada independentemente dos caracteres digitados pelo autor.
Você tem como alvo um padrão de glifos JIS japonês específico para consistência.
Você mistura CJK com texto latino e precisa de algarismos de largura total ou largura proporcional para que as colunas fiquem alinhadas.
Você renderiza texto anotado e deseja as formas de glifos menores de ruby.

Como isso depende de recursos da fonte, só tem efeito visível quando a fonte ativa contém esses glifos alternativos. Se a fonte não tiver variante tradicional, por exemplo, o texto é renderizado sem alterações.

Valor Inicial	normal
Aplica-se a	Todos os elementos. Também se aplica a ::first-letter e ::first-line.
Herdada	Sim.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.fontVariantEastAsian = "ruby";

Sintaxe

Sintaxe da Propriedade CSS font-variant-east-asian

font-variant-east-asian: normal | &lt;east-asian-variant-values&gt; | &lt;east-asian-width-values&gt; | ruby | initial | inherit ;

Exemplo da propriedade font-variant-east-asian:

Exemplo da Propriedade CSS font-variant-east-asian com o valor traditional

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        font-variant-east-asian: traditional;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-east-asian property example</h2>
    <h2>大学 → 大學</h2>
  </body>
</html>

Experimente Você Mesmo »

Pode-se ver aqui que a propriedade font-variant-east-asian está definida como traditional. Você pode alterá-la para qualquer um dos valores mencionados na tabela abaixo desta página, incluindo a variante simplified. Observação: O suporte do navegador para esta propriedade é limitado. O exemplo depende de fontes do sistema que incluem variantes tradicionais do Leste Asiático.

Resultado

![Propriedade CSS font-variant-east-asian](/uploads/media/default/0001/04/b5335cfd42c67834e22ae4ebce451467997f57b6.png "CSS font-variant-east-asian Property" =420x)

Combinando valores de largura e variante

Você pode definir um valor de variante e um valor de largura ao mesmo tempo. As palavras-chave podem ser listadas em qualquer ordem:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .cjk {
        font-variant-east-asian: simplified full-width;
      }
    </style>
  </head>
  <body>
    <p class="cjk">図書館 1234</p>
  </body>
</html>

Aqui, simplified seleciona a variante de glifo simplificado, enquanto full-width força formas de largura total para os dígitos, para que ocupem a mesma largura de célula que os caracteres CJK ao redor.

Valores

Valor	Descrição
normal	O uso de glifos alternativos não está habilitado.
`<east-asian-variant-values>`	Seleciona uma variante de glifo logográfico. Um de `jis78`, `jis83`, `jis90`, `jis04`, `simplified` ou `traditional`.
`<east-asian-width-values>`	Controla o dimensionamento dos algarismos usados para caracteres do Leste Asiático: `proportional-width` (espaçamento proporcional) ou `full-width` (formas de largura total).
ruby	Força o uso de glifos especiais e menores projetados para caracteres ruby (anotação).
initial	Faz a propriedade usar seu valor padrão (`normal`).
inherit	Herda a propriedade do elemento pai.

Um valor válido combina no máximo uma palavra-chave de variante e uma palavra-chave de largura (por exemplo, jis90 full-width), ou as palavras-chave únicas normal ou ruby.

Propriedades relacionadas

font-variant — a propriedade abreviada que inclui esta propriedade individual.
font-feature-settings — controle de baixo nível dos mesmos recursos OpenType.
font-family — escolha uma fonte que realmente contenha glifos de variante do Leste Asiático.

Prática

O que a propriedade 'font-variant-east-asian' no CSS faz?

Modifica a aparência padrão do texto do Leste Asiático na página web.Altera o alinhamento do texto na página web.Permite que caracteres do Leste Asiático de largura total sejam exibidos como 'Largura Proporcional'.Altera a cor do texto na página web.Habilita as formas 'Tradicional' ou 'Simplificada' dos caracteres do Leste Asiático.