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

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.

— 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