Impostazione della ponderazione dei caratteri e della famiglia di caratteri in grassetto nei CSS, che è più corretto?

9

Esistono sostanzialmente due modi per rendere grassetto un carattere nei CSS: tramite l' font-familyattributo e l' font-weightattributo.

Diciamo che sto usando il font Raleway per esempio e ho caricato una variante Light, a Regular, Semibold e Bold tramite css. Potrei rendere audace una semplice voce impostandola su h1{font-family: 'Raleway Bold'}o su h1{font-weight: 700}.

Quale di questi è più corretto o sono entrambi uguali?

css web-fonts html

— pooja
fonte

Dubito che la scrittura di "font-weight" in CSS sia corretta, quando si hanno tutte le opzioni nella famiglia di font. ad esempio: il carattere Raleway ha tutte le opzioni dalla luce alla più audace. Quindi in che modo è appropriato usare tutti i caratteri della famiglia, in modo che non possiamo perdere il carattere.

— pooja,

1

Domande e risposte molto correlate .

— Cai,

@poojaa, mi sono preso la libertà di modificare la tua domanda per rendere più chiara la formattazione e portare in primo piano la domanda reale. Se ritieni che abbia cambiato il significato, puoi sempre modificarlo da solo.

— PieBie

6

Diciamo che abbiamo caricato una variante di carattere grassetto in questo modo:

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

Discuterei a favore dell'uso di entrambi font-familye font-weightdelle specifiche di stile. Per esempio:

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

Entrambi fondamentalmente fanno la stessa cosa: dì alla tua rubrica1 di essere audace. Questo non raddoppierà l'audacia o altro, ripete solo che deve essere audace.

La ragione di ciò è piuttosto semplice: se il tuo file di font non è caricato (sovraccarico del server, restrizioni client, voodoo), il tuo visitatore vedrà comunque un carattere grassetto (in questo caso un Helvetica finto grassetto) e può quindi distinguere tra un titolo e il corpo del testo, che non sarebbe il caso se avessi specificato solo il font-family.

Vedi in questa immagine il set superiore è Raleway e Raleway Italic ma ha il Raleway Italic corretto che viene caricato con:

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

Il fondo sta caricando solo Raleway. Di conseguenza, il set in basso ha Raleway e FAUX Raleway in corsivo. Nota le differenze tra "a" e "k" minuscole, ad esempio tra il corsivo reale e il corsivo falso. Un font ben progettato avrà differenze tra i normali, i grassetti e il corsivo che non otterrai se non li carichi.

— PieBie
fonte

L'uso di un solo cognome e la sola impostazione dei pesi ti daranno comunque il peso corretto nel caso in cui i file dei caratteri non vengano caricati. L'unico motivo per utilizzare entrambi sarebbe per motivi di compatibilità.

— Cai,

1

Sei confuso. Il tuo esempio di font di Google non si riferisce solo al corsivo Raleway come solo font-family: 'Raleway'(contraddicendo il tuo esempio in grassetto sopra) ma, inoltre, indipendentemente dal fatto di nominare l'intera famiglia Ralewayo ogni singola variante con nomi di famiglie di font diversi non ha assolutamente alcuna influenza sull'applicazione di falsi o no . Anche il tuo esempio dimostra che questo è un metodo errato, come il tuo fornito font-family: 'Raleway Bold', Helvetica, Arial, sans;ha Helvetica Bolde Arial Boldsingolarmente perché è solo il modo errato di mettere in cascata varianti di font.

— rgthree,

1

Mentre entrambi i modi ti daranno l'output corretto, il modo più corretto sarebbe quello di utilizzare una singola famiglia di caratteri per raggruppare tutte le diverse varianti di pesi e stili. È lo stesso modo in cui usi i font di sistema (da 'Arial' fino a 'sans-serif') e, infatti, se usi i font di Google per caricare Raleway, utilizzeresti il percorso della famiglia di font singoli.

Descriviamo diversi motivi per cui questo è il metodo corretto.

Riduce la complessità CSS e, in definitiva, la dimensione del file

Avere una singola famiglia di caratteri significa che puoi definire un intero elemento contenente con la famiglia di caratteri e solo alcuni elementi con peso / stili diversi. Prendi ad esempio quanto segue:

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>

Nota quanto è bello e piacevole questo CSS. Non è stato necessario specificare "RalewayBold" come famiglia di caratteri per .bold, né "RalewayItalic" per il nostro .italic. Infatti, non abbiamo nemmeno bisogno di specificare una variante in grassetto e corsivo, poiché le nostre lezioni semplicemente funzioneranno. Inoltre, se .bold è all'interno del nostro .footer, sarà audace Arial e non Raleway, perché eredita semplicemente Arial dal contenitore del piè di pagina.

È il modo in cui lo fa il browser.

Quanto sopra è essenzialmente il modo in cui il foglio di stile interno del browser definisce i caratteri utilizzando stili minimi e la natura intrinseca a cascata dei CSS.

È il modo in cui l'industria fa e lo ha fatto.

Le più grandi proprietà web, applicazioni ed editori lo fanno tutti in questo modo. Google, Facebook, NYT, ESPN, ecc. Definiscono e utilizzano i caratteri in questo modo.

Non solo, ma le interfacce utente prima del CSS o persino di Internet specificano singole famiglie di caratteri e scelgono varianti basate su specifiche diverse di peso e stile. Carica Microsoft Word, KeyNote, Google Docs, persino un vecchio WordPerfect di fine anni '90 e apri il menu a discesa; Vedrai il nome della famiglia di caratteri "Arial" elencato; non "Arial" seguito da "Arial Bold" seguito da "Arial Italic" ecc.

Basta caricare da Google Fonts.

Se carichi Raleway dal repository gratuito di caratteri web su Google Fonts, vedrai che Raleway è definito con un unico cognome:

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

Questo metodo non ignora le variazioni tra gli stili di carattere per quelli falsi?

— Ryan

@Ryan Niente affatto. In effetti, il nome della famiglia di caratteri (o raggruppando correttamente la famiglia come Ralewaycon le varianti di peso / stile, o definendo erroneamente le singole varianti Raleway Bolde Raleway Italiccome singole famiglie di caratteri) non ha alcuna attinenza con l'applicazione di variazioni false o meno. Infatti, raggruppare correttamente la famiglia con lo stesso nome aiuta il browser a scegliere una variante più vicina per applicare uno stile falso, mentre nominare erroneamente ciascuna variante mantiene il browser al buio dei caratteri disponibili per applicare le variazioni se il carattere desiderato non viene caricato.

— rgthree,

(1) Basta caricare da Google Fonts : per i siti Web sicuramente, ma ci sono molti altri casi in cui viene utilizzato html / css in cui non è garantita una connessione a Internet e devi caricare i caratteri localmente, (2) Riduce la complessità CSS una dimensione del file, in definitiva, quindi ti raderai di 1kb su un sito o un'app che sono dozzine di MB, il client sarà sorpreso dalla velocità con cui la tua app si carica, (3) è il modo in cui il browser / settore lo fa : browser il default è falso, e in ogni caso l '"industria" non è sempre corretta né segue le migliori pratiche (basta guardare la flexbox)

— PieBie

browser predefinito per finto Cosa? Chiaramente non sai di cosa stai parlando. Quando specifichi font-family:Arial; font-weight:bold;(quale, di nuovo, è il modo giusto per farlo, indipendentemente dal fatto che sia Arial o Raleway) pensi che il browser stia applicando un finto grassetto a una normale faccia di carattere Arial? Non corretto. Il browser sta caricando la faccia del carattere ArialBold come definito dal sistema e solo se non esiste un carattere esatto disponibile applicherà uno stile falso al miglior carattere corrispondente basato sul nome della famiglia di caratteri, motivo per cui devono essere gli stessi! Non posso dire "Fallo per Arial, ma non Raleway."

— rgthree,

0

Ecco la cosa, se fai la domanda su Raleway, un webfont programmato per CSS, entrambi i modi funzionano ugualmente bene. In questo caso, usa il font-weight perché è il corso d'azione "corretto" che sarà più facile da cambiare e controllare senza grandi cambiamenti nel codice.

Ora inizi a riscontrare problemi una volta incorporato un font, un font che non è necessariamente pianificato per CSS e che i pesi potrebbero non corrispondere ai numeri.

Per questo motivo, un bug molto comune sui caratteri incorporati, estremamente comune nei caratteri non inglesi, è che CSS "ravviva" o "schiarisce" automaticamente il carattere e il risultato è pessimo.

Pertanto, se si utilizza un webfont come i caratteri su google caratteri, si consiglia di andare avanti e utilizzare i numeri sulla grammatura dei caratteri, ma quando si incorpora un carattere da soli, sii al sicuro e usa la famiglia di caratteri per ogni singolo peso separatamente .

— naty
fonte