Definir o peso da fonte versus a família de fontes em negrito no CSS, o que é mais correto?

9

Existem basicamente duas maneiras de tornar uma fonte em negrito no CSS: através do font-familyatributo e através do font-weightatributo.

Digamos que eu esteja usando a fonte Raleway, por exemplo, e carreguei uma variante Light, Regular, Semibold e Negrito via css. Eu poderia virar um cabeçalho simples em negrito, definindo-o como h1{font-family: 'Raleway Bold'}ou para h1{font-weight: 700}.

Qual destes está mais correto ou ambos são iguais?

css web-fonts html pooja
fonte
Eu tenho dúvidas, que escrever "peso da fonte" em css está correto, quando você tem todas as opções na família de fontes. por exemplo: a fonte Raleway tem todas as opções, de leve a mais ousada. Portanto, de que maneira é apropriado usar todas as fontes da família, para que não possamos perder o caractere da fonte.
pooja
11
perguntas e respostas muito relacionadas .
Cai
@poojaa, tomei a liberdade de editar sua pergunta para tornar a formatação mais clara e trazer a questão real para o primeiro plano. Se você sente que mudei o significado, você sempre pode editá- lo.
PieBie

Respostas:

6

Digamos que carregamos uma variante de fonte Negrito da seguinte forma:

@font-face {
  font-family: 'Raleway Bold';
  font-style: normal;
  font-weight: 700;
  src: url(path/to/font/raleway-bold.woff2) format('woff2');
}

Eu argumentaria a favor do uso de ambos font-familye font-weightem suas especificações de estilo. Por exemplo:

h1 {
  font-weight: 700;
  font-family: 'Raleway Bold', Helvetica, Arial, sans;
}

Ambos basicamente fazem a mesma coisa: diga ao cabeçalho1 que seja ousado. Isso não dobrará a ousadia nem nada, apenas repete que precisa ser ousada.

A razão para isso é bem simples: se o arquivo da fonte não estiver carregado (sobrecarga do servidor, restrições do cliente, vodu), o visitante ainda verá uma fonte em negrito (nesse caso, uma Helvetica falsa em negrito) e, portanto, poderá distinguir entre um título e o texto do corpo, o que não seria o caso, se você tivesse especificado apenas o font-family.

Veja nesta imagem o conjunto superior é Raleway e Raleway Italic, mas tem o Raleway Italic adequado sendo carregado com:

<link href='https://fonts.googleapis.com/css?family=Raleway:500,500italic' rel='stylesheet' type='text/css'>

O fundo está carregando apenas o Raleway. Como resultado, o conjunto inferior apresenta Raleway e FAUX Raleway em itálico. Observe as diferenças em letras minúsculas "a" e "k", por exemplo, entre o itálico real e o itálico falso. Uma fonte bem projetada terá diferenças entre regulares, negritos e itálicos que você não obterá se não os carregar.

insira a descrição da imagem aqui

PieBie
fonte
O uso de um nome de família e apenas a definição de pesos ainda fornecerão o peso correto no caso de os arquivos de fonte não serem carregados. O único motivo para usar os dois seria por motivos de compatibilidade.
Cai
11
Você esta confuso. Seu exemplo de fonte do Google não se refere apenas ao Raleway itálico como justo font-family: 'Raleway'(contradizendo seu exemplo em negrito acima), mas, além disso, independentemente de nomear toda a família Ralewayou cada variante individualmente com nomes de família de fontes diferentes, não tem absolutamente nenhuma importância em aplicar ou não o falso . Mesmo o seu próprio exemplo prova este é um método incorreto, como o fornecido font-family: 'Raleway Bold', Helvetica, Arial, sans;tem Helvetica Bolde Arial Boldindividualmente, porque isso é apenas a maneira incorreta de fonte cascata variantes.
Rogthree
1

Embora os dois modos ofereçam a saída correta, a maneira mais correta seria usar uma única família de fontes para agrupar todas as diferentes variantes de pesos e estilos. É da mesma maneira que você usa fontes do sistema (de 'Arial' até 'sans-serif') e, de fato, se você usar fontes do Google para carregar o Raleway, estará usando a rota da família de fontes únicas.

Vamos esboçar várias razões pelas quais esse é o método correto.

Reduz a complexidade do CSS e, finalmente, o tamanho do arquivo

Ter uma única família de fontes significa que você pode definir um elemento inteiro com a família de fontes e apenas certos elementos com pesos / estilos diferentes. Tome o seguinte, por exemplo:

html {
  font-family: Raleway;
}
.bold {
  font-weight: 700;
}
.italic {
  font-style: italic;
}
.footer {
  font-family: Arial;
}

<p>I'm raleway font, <span class="bold">and I'm raleway bold</span></p>
<div class="bold italic">I'm Raleway Bold Italic!</div>
<div class= footer>I'm <span class="bold">Arial Bold,</span> w/ the same class!</div>

Observe como este CSS é agradável e agradável. Não precisamos especificar "RalewayBold" como a família de fontes para .bold, nem "RalewayItalic" para nosso .italic. De fato, nem precisamos especificar uma variante em negrito e itálico, pois nossas classes simplesmente funcionarão. Além disso, se o .bold estiver dentro do nosso .footer, ele será Arial em negrito e não o Raleway, porque simplesmente herda o Arial do contêiner do rodapé.

É assim que o navegador faz.

A descrição acima é essencialmente como a folha de estilo interna do navegador define fontes usando estilos mínimos e a natureza em cascata inerente do CSS.

É assim que a indústria faz e o fez.

As maiores propriedades da web, aplicativos e editores fazem isso dessa maneira. Google, Facebook, NYT, ESPN, etc. todos definem e usam fontes dessa maneira.

Não apenas isso, mas as interfaces de usuário antes do CSS ou até da Internet especificam famílias de fontes únicas e escolhem variantes com base em diferentes especificações de peso e estilo. Carregue o Microsoft Word, KeyNote, Google Docs e até mesmo um WordPerfect antigo dos anos 90 e abra a lista suspensa de fontes; Você verá o nome da família da fonte "Arial" listado; não "Arial" seguido de "Arial Bold" seguido de "Arial Itálico" etc.

Basta carregar no Google Fonts.

Se você carregar o Raleway no repositório gratuito de fontes da web no Google Fonts, verá que o Raleway é definido com um único nome de família:

https://fonts.googleapis.com/css?family=Raleway:400,400italic.500.500italic.700.700italic

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url(https://...Raleway-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 500;
  src: url(https://...Raleway-MediumItalic.woff2) format('woff2');
}
@font-face {
  font-family: 'italic';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-BoldItalic.woff2) format('woff2');
}
rgthree
fonte
Esse método não ignora as variações entre os estilos de fonte dos falsos?
Ryan
@ Ryan De jeito nenhum. De fato, o nome da família de fontes (agrupar corretamente a família Ralewaycom variantes de peso / estilo ou definir variantes individuais incorretamente Raleway Bolde Raleway Italiccomo famílias de fontes individuais) não tem influência na aplicação de variações falsas ou não. De fato, agrupar corretamente a família com o mesmo nome ajuda o navegador a escolher uma variação mais próxima para aplicar um estilo falso, ao nomear incorretamente cada variação separadamente, mantém o navegador no escuro das fontes disponíveis para aplicar variações se a fonte desejada não for carregada.
Rogthree
(1) Carregue apenas das fontes do Google : com certeza, mas há muitas outras instâncias em que o html / css é usado onde a conexão à Internet não é garantida e você precisa carregar as fontes localmente, (2) reduz a complexidade do CSS e, finalmente, o tamanho do arquivo : para economizar 1kb em um site ou aplicativo com dezenas de MB, o cliente ficará surpreso com a rapidez com que o aplicativo é carregado, (3) é a maneira como o navegador / setor faz : navegadores padrão para falso, e mesmo assim a 'indústria' nem sempre é correta nem seguir as melhores práticas (basta olhar para flexbox)
PieBie
navegadores padrão para falso O quê? Você claramente não sabe do que está falando. Quando você especifica font-family:Arial; font-weight:bold;(qual, novamente, é a maneira correta de fazer isso, independentemente de ser Arial ou Raleway), você acha que o navegador está aplicando um falso negrito em uma face normal da fonte Arial? Incorreta. O navegador está carregando a face da fonte ArialBold conforme o sistema define e somente se não houver uma fonte exata disponível , aplicará um estilo falso à melhor fonte correspondente, com base no nome da família da fonte, e é por isso que elas devem ser iguais! Não posso dizer "Faça isso por Arial, mas não por Raleway".
Rogthree
0

Eis a questão: se você fizer a pergunta sobre o Raleway, uma fonte da Web programada para css, as duas maneiras de trabalhar igualmente bem. Nesse caso, use o peso da fonte, porque é o curso de ação "correto" que será mais fácil de alterar e controlar sem grandes alterações no código.

Agora você começa a ter problemas depois de incorporar uma fonte, uma fonte que não é necessariamente planejada para css e os pesos podem não corresponder aos números.

Por esse motivo, um erro muito comum em fontes incorporadas, extremamente comum em fontes não inglesas, é que o css "corta" ou "ilumina" a fonte automaticamente e o resultado é muito ruim.

Portanto, eu recomendo que, se você usar uma fonte da web como as fontes das fontes do google, vá em frente e use os números no peso da fonte, mas quando você mesmo incorporar uma fonte, fique no lado seguro e use a família de fontes para cada peso separadamente. .

Naty
fonte