Problema relativo al font, testo troppo grassetto

Quando si applica uno stile font-weight:bold, l'aspetto del carattere è troppo elevato in Safari rispetto ad altri browser. Ho provato sotto css come suggerito in qualche sito ma è sempre lo stesso.Problema relativo al font, testo troppo grassetto

text-shadow: #000000 0 0 0px;

Screenshots di rendering del testo:

Chrome
enter image description here

Safari
enter image description here

Ecco la mia dichiarazione css:

012.351.

p { 

margin: 8px 5px 0 15px; 
color:#D8D2CE; 
font-size:11pt; 
letter-spacing:-1px; 
font-weight: bold; 
font-family: LektonRegular; 
} 

@font-face { 
font-family: 'LektonRegular'; 
src: url('myfonts/lekton-regular-webfont.eot'); 
src: url('myfonts/lekton-regular-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfonts/lekton-regular-webfont.woff') format('woff'), 
    url(myfonts/lekton-regular-webfont.ttf) format('truetype'), 
    url('myfonts/lekton-regular-webfont.svg#LektonRegular') format('svg'); 
font-weight: normal; 
font-style: normal; 

}

Come può essere risolto?

fonte

2012-02-26 user1184100

Questo problema si osserva solo in safari! – user1184100

Hai risolto questo problema? –

Per il rendering in grassetto del testo in modo coerente nei browser, il carattere deve contenere esplicitamente caratteri in grassetto. In caso contrario, i browser probabilmente tentano di creare varianti audaci dei caratteri in base alle loro varianti normali e i risultati sono incoerenti tra i vari browser poiché probabilmente hanno algoritmi diversi per tale conversione.

Si noti inoltre che il rendering del testo può essere diverso su piattaforme diverse a livello di sistema (ad esempio Windows, Mac OS). Tali differenze sono OK e in genere non devono essere risolti.

Vedere anche topic about -webkit-font-smoothing property.

fonte

2012-02-26 09:10:59

È vero che non fornire una variante in grassetto dei caratteri personalizzati costringerà il browser a generare un font "faux grassetto" per il testo in grassetto, che potrebbe sembrare un po 'strano Ma non risolverà il problema che Safari per impostazione predefinita rende tutto il testo più grasso di altri browser - la risposta di Paolo qui sotto la risolverà. –

@OlaTuvesson È perfettamente OK per il rendering delle pagine con il rendering predefinito del sistema operativo. Non è necessario e persino dannoso essere controllato dallo sviluppatore web. Inoltre, le proprietà con prefisso del venditore sono soggette a essere rimosse o modificate in futuro e pertanto le soluzioni basate su di esse non sono a prova di futuro. –

Davvero non sono d'accordo; la maggior parte dei miei clienti è molto interessata a mantenere l'identità del marchio su tutte le piattaforme (per quanto possibile) - e sì, questo include i caratteri e il loro peso. Inoltre, l'eccessiva audacia in Safari tende a rendere il testo più difficile da leggere e in generale sembra piuttosto spazzatura. –

Usa -webkit-font-smoothing: antialiased;

Il trucco text-shadow non funziona più.

fonte

2012-02-26 05:09:30

grazie paolo! .. provato il css sopra ma non riesco a trovare alcuna differenza: | – user1184100

Questo assolutamente funziona nella mia esperienza. Un milione di grazie e mille lodi su di te e sulla tua casa. –

ha funzionato anche per me (sull'elemento div, non in @ font-face) – Kevin

Nessuna delle risposte qui ha funzionato per me. Forse perché sto usando la versione Windows di Safari per i test. Ho dovuto includere il carattere grassetto nel mio CSS per risolvere il problema. Nel caso della domanda originale che avrebbe bisogno di aggiungere la seguente (notare che utilizza lo stesso nome font-family)

@font-face { 
font-family: 'LektonRegular'; 
src: url('myfonts/lekton-bold-webfont.eot'); 
src: url('myfonts/lekton-bold-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfonts/lekton-bold-webfont.woff') format('woff'), 
    url(myfonts/lekton-bold-webfont.ttf) format('truetype'), 
    url('myfonts/lekton-bold-webfont.svg#LektonRegular') format('svg'); 
font-weight: bold; 
font-style: normal; 
}

Questo ha funzionato in tutti i browser per me.

fonte

2014-10-22 19:55:25 nuander

Le soluzioni -webkit non funzioneranno per il forte problema di molti tipi di caratteri google, font personalizzati e tipi di carattere che non hanno valori preimpostati.

Il problema è che è necessario specificare il valore di grassetto nei tag forti.

Questo può essere fatto in due modi:

sia È possibile includere da Google Fonts o dovunque il tuo carattere è da nell'intestazione; ha bisogno sia il carattere regolare e il carattere in grassetto ogni dovrebbe avere un diverso numero font-weight come 400 regolari e 600 in grassetto ad esempio:

<link href="https://fonts.xxx.com/css?family=XXX:400,600" rel="stylesheet">

o utilizzare il codice aboves sorgente e incollare nel vostro css come qui di seguito:

@font-face { 
    font-family: 'XXX'; 
    font-style: normal; 
    font-weight: 600; 
    src: local('XXX SemiBold'), local('XXX-SemiBold'), 
    url... 
}

Utilizzare qualsiasi carattere invece di XXX.

Poi anche in forte {font-weight:600;}

fonte

2017-05-03 08:23:22 Beth

Problema relativo al font, testo troppo grassetto

risposta

Problemi correlati