Verificação HTML: CSS: Regra at não reconhecida "@font-feature-values"

Sobre este problema HTML

A regra at @font-feature-values permite definir nomes legíveis para índices de funcionalidades de fontes OpenType, que você pode depois referenciar usando propriedades como font-variant-alternates. Por exemplo, em vez de memorizar que o índice de swash 1 corresponde a um estilo “fancy”, você pode definir um valor nomeado e usá-lo semanticamente ao longo do seu CSS. Esta é uma funcionalidade legítima e útil definida na especificação CSS Fonts Module Level 4.

O erro de validação ocorre porque o validador CSS do W3C nem sempre acompanha o ritmo das especificações CSS mais recentes. A regra @font-feature-values, juntamente com os seus blocos de tipo de funcionalidade associados como @swash, @styleset, @character-variant, @ornaments, @annotation e @stylistic, pode simplesmente não estar ainda na gramática reconhecida do validador. Isto não significa que o seu CSS está quebrado ou inválido — significa que o validador tem uma lacuna na sua cobertura.

Dito isto, existem razões práticas para considerar alternativas. Se você precisa passar numa validação W3C rigorosa (por exemplo, como requisito de projeto ou obrigação contratual), ou se precisa suportar navegadores mais antigos que não têm suporte para @font-feature-values, a propriedade font-feature-settings oferece uma forma mais amplamente reconhecida de ativar funcionalidades OpenType. A desvantagem é que font-feature-settings usa tags de funcionalidade OpenType brutas de quatro caracteres em vez de nomes amigáveis, tornando-a menos legível mas mais portável.

Como corrigir

Você tem várias opções:

Ignorar o aviso. Se os seus navegadores alvo suportam @font-feature-values, o CSS é válido conforme a especificação. O erro do validador é um falso positivo.
Mover a regra at para uma folha de estilos externa. Se você está a validar HTML e o CSS está num bloco <style>, movê-lo para um ficheiro .css externo pode ajudá-lo a separar preocupações e saltar a validação CSS durante as verificações HTML.
Substituir por font-feature-settings. Usar a propriedade de nível inferior para ativar funcionalidades OpenType diretamente pelos seus códigos de tag.

Exemplos

Código que desencadeia o erro de validação

@font-feature-values "MyFamily" {
  @swash {
    fancy: 1;
  }
}

p {
  font-family: "MyFamily", serif;
  font-variant-alternates: swash(fancy);
}

O validador não reconhece @font-feature-values e sinaliza-o como um erro, mesmo que este seja CSS conforme à especificação.

Corrigido: usar `font-feature-settings` em vez disso

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Font Feature Example</title>
    <style>
      p {
        font-family: "MyFamily", serif;
        font-feature-settings: "swsh" 1;
      }
    </style>
  </head>
  <body>
    <p>This text uses OpenType swash glyphs via font-feature-settings.</p>
  </body>
</html>

A propriedade font-feature-settings aceita tags de funcionalidade OpenType diretamente. Tags comuns incluem "swsh" para swashes, "smcp" para versaletes, "liga" para ligaduras padrão e "onum" para numerais antigos. Esta abordagem evita completamente o erro de regra at não reconhecida.

Corrigido: manter `@font-feature-values` com um fallback

Se você quer usar a sintaxe mais legível @font-feature-values enquanto também fornece suporte de fallback, pode combinar ambas as abordagens:

p {
  font-family: "MyFamily", serif;
  font-feature-settings: "swsh" 1;
  font-variant-alternates: swash(fancy);
}

@font-feature-values "MyFamily" {
  @swash {
    fancy: 1;
  }
}

Navegadores que compreendem font-variant-alternates e @font-feature-values vão usar o valor nomeado. Outros vão usar o fallback font-feature-settings. O erro de validação persistirá com esta abordagem, mas o seu CSS será robusto e conforme à especificação independentemente.