2015-09-05 16 views
16

È possibile specificare un carattere di sistema in un CSS indirizzato a iOS (da visualizzare in un UIWebView) e ottenere risultati simili come quando si progetta con Interface Builder:Lascia che iOS scelga il carattere di sistema Helvetica Neue o San Francisco nei CSS

IB Font Menu

Può un CSS set sistema, System + Peso o Stili di testo invece di font-family:Helvetica Neue:

<html> 
<head> 
<style type=\"text/css\"> 
    body{font-family:Helvetica Neue; font-size:14;} 
</style> 
</head> 
<body></body> 
</html> 

sistema

UIFont.systemFontOfSize(), UIFont.boldSystemFontOfSize(), UIFont.italicSystemFontOfSize() 

System + Peso

Come in let mediumWeight = UIFont.systemFontOfSize(17, weight: UIFontWeightMedium)

UIFontWeightUltraLight, UIFontWeightThin, UIFontWeightLight, UIFontWeightRegular, UIFontWeightMedium, UIFontWeightSemibold, UIFontWeightBold, UIFontWeightHeavy, UIFontWeightBlack 

Stili di testo

Body, Callout, Caption 1, Caption 2, Footnote, Headline, Subhead, Title 1, Title 2, Title 3 

risposta

46

su iOS e OS X utilizzando il valore CSS “-Apple-system” per il “font-family” Proprietà CSS.

Come evidenziato a webkit.org, non ci sono attualmente discussioni in seno al W3C in materia di standardizzazione questo valore in modo autori potrebbero semplicemente specificare sistema.


font di sistema

-Apple sistema su iOS 9 & Safari OS X 10.11

Utilizzando font-family:CSS Proprietà:

font-family: -apple-system; 
font-family: '-apple-system','HelveticaNeue'; // iOS 8 compatible, credit: @MarcoBoschi 

Nel contesto (fallback a HelveticaNeue quando -apple-system è indefinito):

<html> 
<head> 
<style type=\"text/css\"> 
    body{font-family: '-apple-system','HelveticaNeue'; font-size:17;} 
</style> 
</head> 
<body></body> 
</html> 

Peso & Stile

Utilizzando font-weight:CSS Proprietà:

normal, bold, bolder, lighter 
100, 200, 300, 400, 500, 600, 700, 800, 900 

Utilizzando font-style:CSS Proprietà:

normal, italic 

dinamica Font

-Apple-system-xxx su iOS 8.4.

Utilizzando font:CSS Proprietà (rappresentare un intero stile, tra cui le dimensioni e il peso):

font: -apple-system-body 
font: -apple-system-headline 
font: -apple-system-subheadline 
font: -apple-system-caption1 
font: -apple-system-caption2 
font: -apple-system-footnote 
font: -apple-system-short-body 
font: -apple-system-short-headline 
font: -apple-system-short-subheadline 
font: -apple-system-short-caption1 
font: -apple-system-short-footnote 
font: -apple-system-tall-body 

Nel contesto:

<html> 
<head> 
<style type=\"text/css\"> 
    body{font: -apple-system-body;} 
</style> 
</head> 
<body></body> 
</html> 

enter image description here


► Trova questo soluzione su GitHub e ulteriori dettagli su Swift Recipes.

+1

Ho provato a impostare 'font-family' su' -apple-system' ma su iOS 8.4.1 (iPhone 5s) non funziona e il testo viene visualizzato in Times New Roman. L'impostazione della proprietà 'font' funziona correttamente. –

+2

Usa 'font-family: '-apple-system', 'HelveticaNeue';'. Selezionando 'Helvetica' quando' -apple-system' non è definito e 'San Francisco' su iOS 9. – SwiftArchitect

+1

@SwiftArchitect, grazie. Funziona perfettamente per la mia app. –

0

Per espandere ulteriormente la risposta corretta da @SwiftArchitect, ho eseguito il debug di un font invisibile su un dispositivo iOS (iPhone 7 in Safari) utilizzando un Mac su Safari. La mia font-family era:

h1, h2, h3, h4, h5 {font-family: "blisslight", blisslight, "blissregular", blissregular, Arial, sans-serif;} 

iOS ignorato tutti i font di fallback tra cui Arial, così ho finito per usare questo per farlo funzionare:

h1, h2, h3, h4, h5 {font-family: -apple-system, "blisslight", blisslight, "blissregular", blissregular, Arial, Helvetica, sans-serif;} 

Safari non rendeva -Apple-sistema di codice come passabile fino a quando il nuovo CSS è stato caricato nonostante abbia aggiunto il nuovo CSS in Web Inspector.