Come posso creare caratteri molto sottili con CSS, come a http://www.google.com/landing/newgadgets/?Carattere molto sottile CSS?
In questo momento sto usando questo, ma sono su un mac e non credo che "Helvetica Neue" sia supportata su Windows.
h1{
font-size:64px;
font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight:100;
}
Qualche idea per caratteri sottili e nitidi?
Google sta utilizzando le loro API carattere e del CSS @font-face
Vedere il seguente riferimento nel loro codice:
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin" rel="stylesheet">
Di seguito si riporta la definizione esatta che "registri" detto font:
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v5/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
Quindi applicano semplicemente quel tipo di carattere all'elemento/i:
h1, h2, h3, h4, blockquote, q, .maia-nav ul {
font-family: 'open sans',arial,sans-serif;
}
Nota:@font-face font non rendano crisply sui browser di livello inferiore. Se devi supportarli, prova: http://cufon.shoqolate.com/
+1 per spiegazione – benesch
Che cos'è un browser "di livello inferiore"? – BoltClock
Termine @BoltClock utilizzato per descrivere * browser meno recenti * - ecco un post che utilizza quel termine: http://msdn.microsoft.com/en-us/library/x3k2ssx2(v=vs.85).aspx – xandercoded
Basta prendere quel carattere da Google's Web Fonts.
Selezionare i font che si desidera, selezionare gli stili (grassetto , corsivo, etc.) e Google vi darà un elemento <link /> da includere nel codice HTML.
Quel carattere corrente si chiama Aperto Sans:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Ora è possibile utilizzarlo:
font-family: 'Open Sans', sans-serif;
Io uso Google Fonts. Un esempio di sottile:
+1 Stavo cercando il font più vicino a Helvetica Neue. Grazie! – Bigood
Helvetica Neue è supportato su Windows se è installato. Però è davvero brutto * su Windows. – BoltClock
Devi citare qualsiasi valore di carattere che abbia spazi, dovrebbe essere 'font-family:" Helvetica Neue ", Helvetica, Arial, sans-serif;' –
Non dovrebbe "Helvetica Neue" essere circondata da virgolette? – fge