Cross browser Problema font Semibold

Sto usando il font "Signika" per la mia app web. Il disegno è fornito in file Adobe Illustrator in cui è stato utilizzato il carattere "Signika Semibold".Cross browser Problema font Semibold

Primo metodo:

ho applicato font-family: Signika Semibold ma funziona come semi-grassetto solo su Chrome. Firefox e IE visualizzano il testo con il peso del carattere normale.

JS Fiddle

HTML

<p class="semi"> 
    Abcd Efgh 
</p>

CSS

.semi{ 
    font-family:'Signika Semibold'; 
    font-size:14px; 
}

Secondo metodo:

ho applicato font-family: Signika e ha dato font-weight: 500 per SemiBold. Tuttavia appare come in grassetto anziché Semibold su Chrome.

JS Fiddle

HTML

<p class="weight"> 
    Abcd Efgh 
</p>

CSS

.weight{ 
    font-family:'Signika'; 
    font-weight:500; 
    font-size:14px; 
}

Esiste una soluzione per risolvere questo problema?

fonte

2015-06-30 Alekh Shah

Il fiddle non include un riferimento al carattere effettivo, ma un modo abbastanza sicuro per assicurarsi che il carattere sia effettivamente caricato in ogni browser è controllare le statistiche della console/rete per il carattere CSS applicato - dovrebbe rendere più chiaro quale stile viene applicato rispetto ai diversi motori di rendering/fallback di ciascun browser. – Paracetamol

SOLUZIONE

utilizzato Google font con stili richiesti: Normal (400), semi-grassetto (600), in grassetto (700))

Link of Google Font

importato il font incluso questo codice nella sezione HEAD di HTML

<link href='https://fonts.googleapis.com/css?family=Signika:700,400,600' rel='stylesheet' type='text/css'>

Poi, nel CSS,

Per Normale

font-weight:400;

per semi-grassetto

font-weight:600;

per Bold

font-weight:700;

Utilizzando questo metodo, i caratteri su tutti i browser si assomigliano.

fonte

2015-06-30 09:58:46

In realtà, la tua seconda JSFiddle aveva:

font-weight: 600;

Invece di 500. Ecco il vostro violino aggiornato.

http://jsfiddle.net/gbj7b1jp/1/

ora non è in grassetto.

fonte

2015-06-30 07:18:55 Thyrun

Ciao. Grazie. Ma 500 non è lo stesso su tutti i browser. È più verso bold su Chrome che su Firefox e IE. Questo è il problema. –

@AlekhShah diversi browser possono avere una sfumatura dei font diversa che può portare a differenze di peso dei caratteri visivi sottili. In altre parole, potrebbe avere lo stesso font-weight su entrambi i browser, ma a causa del modo in cui un browser uniforma il font rispetto all'altro, potrebbe sembrare più audace in un browser rispetto all'altro. –

usaly Semibold è font-weight:400;

tuttavia si esegue la scansione di specificare la vostra proprietà del carattere durante l'importazione di font con @font-face:

@font-face { 
    font-family: Signika; 
    src: url(SignikaLight.otf); 
    font-style: normal; 
    font-weight: 100; 
} 

@font-face { 
    font-family: Signika; 
    src: url(SignikaRegular.otf); 
    font-style: normal; 
    font-weight: 300; 
} 

@font-face { 
    font-family: Signika; 
    src: url(SignikaSemibold.otf); 
    font-style: normal; 
    font-weight: 400; 
} 

@font-face { 
    font-family: Signika; 
    src: url(SignikaBold.otf); 
    font-style: normal; 
    font-weight: 600; 
}

fonte

2015-06-30 07:22:20

Alcuni screenshots sarebbe terribile. I caratteri tendono ad apparire più pesanti nei browser Webkit perché usano sub-pixel antialiasing per smussare i caratteri. Prova a impostare -webkit-font-smoothing: antialiased; e dovrebbe iniziare ad apparire simile a come appare negli altri browser.

Dai un'occhiata alla pagina this per ulteriori dettagli.

C'è un avvertimento per usare questo però: In generale, si dovrebbe lasciare che il browser gestisca questo. Noterai che la pagina MDN menziona che questa è una funzione non standard.

Se sei interessato a come queste diverse tecniche di livellamento producono output diversi, check this out.

fonte

2015-06-30 07:25:04 godfrzero

Questo è un problema noto in CSS. I browser Web non sono riusciti a implementare il peso dei caratteri dal libro: in gran parte non riescono a trovare la versione del peso specifica, ad eccezione del grassetto. La soluzione alternativa consiste nell'includere le informazioni nel nome della famiglia di caratteri, anche se questo non è il modo in cui le cose dovrebbero funzionare. Puoi dare un'occhiata a questo link (funziona solo in IE) e identificare la migliore corrispondenza tra lo stile del carattere dalla lista è il trucco facile a questo problema. http://www.cs.tut.fi/~jkorpela/listfonts.html

fonte

2015-06-30 08:21:13

Cross browser Problema font Semibold

risposta

Problemi correlati