Posso usar um valor personalizado para font-namepropriedade em @font-faceseção em CSS?
Por exemplo, se eu tiver o CSS funcionando corretamente:
@font-face {
font-family: "foo";
src: url(foo.otf) format('otf');
}
Está font-family: "foo"relacionado ao conteúdo do foo.otfou será válido alterar o CSS acima para:
@font-face {
font-family: "bar";
src: url(foo.otf) format('otf');
}
dado que, é claro, atualizarei todas as referências a isso font-familyem todos os outros lugares. Ou seja, mudarei font-family: "foo";para font-family: "bar";.
Um pouco de contexto.
Eu me deparo com o problema no seguinte cenário. Tenho um site on-line complexo (site A). Estou desenvolvendo um microfrontend para esse site. Esse site não espera que eu carregue nenhuma fonte e eu não quero carregar nenhuma fonte quando o microfrontend for executado no contexto desse site.
Mas há outro site (site B), no contexto do qual eu quero que meu microfrontend carregue fontes. Então, eu preciso ter a @font-faceseção no meu CSS.
Agora, o problema parece ser que o site A em algum lugar em seu CSS tem font-family: "foo";e também carrega meu microfrontend antes de carregar suas fontes, ou seja, antes de processar sua própria @font-faceseção. Então, parece depender de mim @font-facepara carregar a "foo"fonte. E falha devido a restrições CORS no servidor que hospeda meu microfrontend. As configurações CORS não podem ser alteradas devido ao domínio do aplicativo, elas estão lá como esperado.
Então, estou pensando em limitar meu `@font-face' apenas ao meu microfrontend com a ajuda do nome de fonte personalizado e estava preocupado em verificar se é uma abordagem sensata.
