Grande carattere, lettere sottili

Question

Diciamo che uso font-size:30px; e font-family:Verdana;.

Ho bisogno quelle lettere di essere grande, ma ancora sottile, così ho provato font-weight:lighter;.

Tuttavia, non cambia nulla, alcuni tipi di carattere si ridurranno, alcuni non saranno interessati.

Come posso creare lettere grandi ma sottili? C'è un modo in CSS, o questi sono caratteri specifici?

Answer 1

Per ottenere una versione più magro di Verdana, a causa del tipo di carattere che non supportano alcuni pesi, si dovrà ospitare la propria versione del carattere, o utilizzare un altro tipo di carattere già ospitato per raggiungere il vostro look.

Alcuni tipi di carattere non supportano versioni più leggere/più pesanti di se stessi - se lo fanno, potrebbero non essere allineati con la scala numerica CSS (come indicato).

Da here.

Perché così tanti tipi di carattere di qualità web professionali sono disponibili in una varietà di pesi, ora ha molto più senso di utilizzare la scala numerica di ha fatto quando abbiamo avuto solo a che fare con 'normale' (400) e 'audace' (600). In genere, i pesi di una famiglia possono essere mappati a questi valori:

100: Ultra Light

200: Magro

300: Luce

400: Regolare

500: Semi Bold

600: Bold

700: Extra Bold

800: Heavy

900: Ultrapesante

Nota la parola chiave, c'è: in genere. La realtà, purtroppo, è che molti font non sono conformi a questo modello, come quando una famiglia ha una moltitudine di pesi o dove le proprie definizioni non sono necessariamente conformi alla scala standard .

Quindi, per farla breve, è necessario ospitare una versione "più sottile" del carattere (una creata o scaricata) oppure utilizzare un carattere diverso.

IMO Tahoma, Hedley o Ginevra sono tipi di carattere simili, tuttavia questi non sono liberamente disponibili - è possibile vedere Google fonts per alcuni, che sia voi che @minitech avete sottolineato.

Answer 2

Questa è la cosa più vicina che mi è venuta in mente.

div{ 
    font-family:Verdana; 
    font-size:30px; 
    font-weight:100; 
    -webkit-text-stroke-color: rgb(255,255,255); 
    -webkit-text-stroke-width: 1px; 
    -webkit-font-smoothing: antialiased; 
} 

Problemi:
1. funziona solo con browser WebKit (Safari, Chrome)
2. Se lo sfondo dietro il testo non è un colore solido allora sarà visibile che si tratta di un colpo di testo .
http://jsfiddle.net/dru87/

Answer 3

L'uso di font-weight significa chiedere caratteri di tipo diverso (tipi di carattere specifici) dalla famiglia di caratteri. La famiglia di caratteri Verdana non ha caratteri più chiari del normale, quindi è normale. Questo vale per la maggior parte dei tipi di carattere che è possibile utilizzare normalmente nelle pagine Web.

In Google Web Fonts, ad esempio, è possibile trovare molte famiglie di caratteri con caratteri più chiari del normale, ad es. Source Sans Pro ha pesi 200 e 300.

Nota: la luminosità di un carattere tipografico è relativa al carattere. Ciò che è light (200) nella famiglia di font potrebbe corrispondere a ciò che è normale (400) in un'altra famiglia di font.

Answer 4

scegliere un carattere sottile e applicare bigtext.js/fittext.js o slabtext.js

Answer 5

Non tutti i font supporta tutte le larghezze. Se stai cercando alcuni buoni caratteri sottili. Puoi dare un'occhiata a questo elenco thin google fonts. Sono gratuiti e facili da implementare.

Answer 6

Step1: incluso nel caricare i font da Google

https://fonts.googleapis.com/css?family=Lato:100italic' rel = 'text fogli di stile' type = '/ css'> https :? //fonts.googleapis.com/css famiglia = Lato: 100' rel = 'stylesheet' type = 'text/css'>

Fase 2: Aggiungere le seguenti proprietà CSS .text { font-family: Lato , sans-serif;

font-weight: 100;

font-size: 7em; }

Fatto!

funzionerà sicuramente

Per maggiori informazioni visitate http://tobiasahlin.com/typesource/01-elements-of-html-and-css/