Come figura tipi differenti con Google Web Fonts

Secondo this page:Come figura tipi differenti con Google Web Fonts

[Raleway] è un volto di visualizzazione e il download è dotato sia vecchio stile e rivestimento numeri, legature standard e discrezionali, a pretty set completo di segni diacritici, nonché un sostituto stilistico ispirato allo da più tipi di caratteri sans-serif geometrici rispetto al suo set di caratteri di default neo-grottesco .

(enfasi mia)

L'impostazione predefinita per numeri è "vecchio stile" ("onum" OpenType feature string), che sembrano abbastanza terribile se usato in titoli. Idealmente, mi piacerebbe essere in grado di usare la variante "lining" ("lnum"), con kerning "tabulare" ("tnum") (al contrario di proporzionale - "pnum").

Ho provato con il seguente blocco di font-feature-settings dichiarazioni, senza alcun risultato:

font-feature-settings: "onum" off, "pnum" off, "lnum" on, "tnum" on; 
-moz-font-feature-settings: "onum=0, pnum=0, lnum=1, tnum=1";  /* Firefox */ 
-webkit-font-feature-settings: "onum" off, "pnum" off, "lnum" on, "tnum" on; /* WebKit */ 
-o-font-feature-settings: "onum" off, "pnum" off, "lnum" on, "tnum" on;  /* Opera */

Qualche idea? Se volessi scaricare il font completo e poi riesportarlo come un carattere web, come dovrei farlo assicurandomi di ottenere i dati del rivestimento?

Grazie!

fonte

2013-06-20 aendrew

Si noti che non è mai stato supportato ['-o-font-feature-settings' in Presto] (http://www.opera.com/docs/specs/presto2.12/css/fonts/). Passando a Blink Opera 15 ha iniziato sostegno '-webkit-font-funzione-Settings'. –

Risposta esauriente e più corretta qui: http://stackoverflow.com/a/15161336/1696030 –

Da questa pagina: http://clagnut.com/sandbox/css3/

.lnum { 
    font-variant-numeric: lining-nums; 
    -moz-font-feature-settings:"lnum" 1; 
    -moz-font-feature-settings:"lnum=1"; 
    -ms-font-feature-settings:"lnum" 1; 
    -o-font-feature-settings:"lnum" 1; 
    -webkit-font-feature-settings:"lnum" 1; 
    font-feature-settings:"lnum" 1; 
}

funziona solo con file .otf per ora, non con carattere Incorporamenti ospitati da Google webfonts. Non supportato in Safari. È possibile testare altre funzionalità di carattere e supporto browser qui: https://www.typotheque.com/articles/opentype_features_in_web_browsers_-_tests

fonte

2013-06-20 19:28:10 jcummins

questo in realtà funziona ora (con i caratteri Web di Google) in FF 28 (notte) e Chrome 33 (canarino). Non in Safari 7 ... –

funziona molto bene, MA quando lo si posiziona all'interno di un elemento che ha FLOAT LEFT o DISPLAY INLINE BLOCK, questo elimina i caratteri e fa sì che il testo si sovrapponga. Qualcuno sa perché? o una soluzione? – CodeGodie

@DiegoCamacho notato anche questo. Penso che sia troppo sanguinoso per Chrome/Safari ... i font che non hanno le caratteristiche (o qualcos'altro che non riesco a identificare) causano tutti i tipi di comportamento curioso. Quando ho attivato 'onum', la selezione del testo causa questa pazzia della direzione inversa. – Drew

Se si desidera scaricare il carattere e generare una nuova versione con numeri di rivestimento o altre funzionalità di OpenType, consultare http://www.fontsquirrel.com/tools/webfont-generator.

Avrete bisogno di entrare in modalità esperto, ma in OpenType Appiattimento è possibile selezionare i numeri di rivestimento. Se sei così inclinato, potresti persino generare una versione con il modulo W alternativo.

A partire dalla fine del 2014, questo è l'unico modo per ottenere numeri di rivestimento in Safari.

fonte

2014-10-11 05:09:51 wbond

Font Squirrel sembra sia stato aggiornato: C'è una possibilità di mantenere tutte le caratteristiche ora ... è impressionante. – WraithKenny

Per seguire la risposta di wbond, che dovrebbe prendere tutto il merito per questo post, la modalità esperto nello scoiattolo dei font sembrerà inizialmente intimidatoria. Ma ha menzionato il sempre importante alternato W, che è una grande differenza per il raleway. Nota che G è diverso anche tra gli stili.

Basta inserire "sale" nella casella Funzioni OpenType e scaricare il kit.

Poi ovunque si desidera accedere allo stile del sale, si aggiunge questo al css:

-moz-font-feature-settings:"salt" 1; 
    -ms-font-feature-settings:"salt" 1; 
    -o-font-feature-settings:"salt" 1; 
    -webkit-font-feature-settings:"salt" 1; 
    font-feature-settings:"salt" 1;

spiace, ma questo dovrebbe essere un commento su quella risposta, ma non posso aggiungere un immagine ai commenti. Mi avrebbe risparmiato un po 'di tempo se qualcun altro avesse quest'immagine da mostrarmi, quindi ho ritenuto che valesse la pena postare.

fonte

2017-01-27 23:11:52

Come figura tipi differenti con Google Web Fonts

risposta

Problemi correlati