激情综合网站,又色又爽又黄的免费视频播放,中文字幕韩国电影

如果要用一個詞來描述的話，可以把其稱為字體變體（Font variants），對應(yīng)的CSS屬性就是font-variation-*屬性，其包括連接（ligatures）、大寫（caps）、數(shù)字（numerals）和替代字形（alternate glyphs）。這些屬性可以讓我們在Web上創(chuàng)建更精準、更漂亮的排版（文本）效果。

事實上，Web上的排版總是要落后于它在它印刷中的效果。但這是可以理解的，因為打印在頁面上的字體已經(jīng)經(jīng)過幾個世紀的發(fā)展，可以說發(fā)展到一個復(fù)雜的程度。而在瀏覽器要達到這樣的一個層次，還是很難的。

但是，由于Web字體中OpenType功有的增加，以及CSS特性的完善與能力的提高，Web上排版和印刷上排版之間的差距在逐漸拉小。

那么今天這篇文章，借助前面的示例，我們來看看如何使用CSS控制OpenType特性，但請記住，你所使用的任何Web字體需要支持這些特性。

`font-variant-*`屬性

在CSS中可以通過font-variant-*屬性來控制大多數(shù)OpenType特性。也可以使用font-feature-settings用來支持低版本瀏覽器。然而，只要可能，你應(yīng)該使用更現(xiàn)代的font-variant-*屬性。在實際使用的時候，可以使用@supports規(guī)則來對font-variant-*做降級處理，對于支持的瀏覽器使用該屬性，不支持的瀏覽器使用font-feature-settings。

body {    font-feature-settings: "liga" 1;}@supports (font-variant-ligatures: common-ligatures) {    body {        font-feature-settings: normal;        font-variant-ligatures: common-ligatures;    }}

可能到現(xiàn)在為止，你和我一樣，都還不太明白上面的代碼究竟起了什么作用。別擔(dān)心，繼續(xù)往后閱讀，你會整明白的。

font-variant-*主要包括：

font-variant-ligatures
font-variant-caps
font-variant-numeric
font-variant-alternates
font-variant-east-asian

后面的內(nèi)容簡單的來看看這些屬性。

`font-variant-ligatures`

連接是由兩個或兩個以上的字答組成的單個字形。它們通常能防止難看或?qū)擂蔚淖帜概鲎病Ｖ饕枪δ苁?strong>有助于辨認。

font-variant-ligatures可以用以下關(guān)鍵詞做為其屬性值：

font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures;           
font-variant-ligatures: no-common-ligatures;        
font-variant-ligatures: discretionary-ligatures;    
font-variant-ligatures: no-discretionary-ligatures; 
font-variant-ligatures: historical-ligatures;       
font-variant-ligatures: no-historical-ligatures;    
font-variant-ligatures: contextual;                 
font-variant-ligatures: no-contextual;              
font-variant-ligatures: contextual;                 


font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: unset;

`common-ligatures`

這些連接是設(shè)計者決定在正常情況下使用的連接。在大多數(shù)情況下，應(yīng)該使用這些，因為大數(shù)瀏覽器都默認啟用它們。

最常見的連接值是fi、ffi、th或者類似的。它們對應(yīng)的OpenType值為liga和clig。兩個值都是有可能的：

common-ligatures：激活連接
no-common-ligatures：禁用連接

比如：

font-variant-ligatures: common-ligatures; font-variant-ligatures: no-common-ligatures; font-feature-settings: 'liga' 1; font-feature-settings: 'liga' 0;

效果如下：

上一行開啟連接，下一行禁用連接的效果

`discretionary-ligatures`

這些可以用于印刷方面的連接，可以達到特殊效果。這些默認是禁用的。也可以理解為，這些值可以用來控制特定的連接，指定的字體并由OpenType設(shè)計器來定義。它們對應(yīng)的是OpenType值dig。它也有兩個可能的值：

discretionary-ligatures：激活連接
no-discretionary-ligatures：禁用連接

如果你的代碼中設(shè)置了：

font-variant-ligatures: discretionary-ligatures; font-variant-ligatures: no-discretionary-ligatures; font-feature-settings: 'dlig' 1; font-feature-settings: 'dlig' 0;

效果如下：

第一行開啟連接，第二行禁用連接

`contextual`

這些值控制字母是否適應(yīng)它們的上下文。也就是說，它們是否適應(yīng)周圍的字母。這些值對應(yīng)于OpenType中的calt。同樣的contextual表示啟用；no-contextual表示禁用。

font-variant-ligatures: contextual; font-variant-ligatures: no-contextual; font-feature-settings: 'calt' 1; font-feature-settings: 'calt' 0; historical-ligatures

使用這些值，看上去就像德文中的tz顯示成?。它對應(yīng)的OpenType值是hlig。historical-ligatures環(huán)開啟，而no-historical-ligatures禁用。

font-variant-ligatures: historical-ligatures; font-variant-ligatures: no-historical-ligatures; font-feature-settings: 'hlig' 1; font-feature-settings: 'hlig' 0;

`font-variant-position`

我們經(jīng)常使用了sub和sup元素的來改為字符在垂直方向的位置。默認情況下，瀏覽器會使用一個常規(guī)的數(shù)字字符，使font-size更小，并使用vertical-align來提高或降低它。這些都不是真正的sub和sup，而且通常會顯得很難看，更不用說它們會打亂line-height。

值得慶幸的是，現(xiàn)在有一種方法可以使用font-variant-position真正實現(xiàn)sub和sup這樣的效果。不過目前該屬性只在Firefox中得到支持。

font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;font-variant-position: inherit;
font-variant-position: initial;
font-variant-position: unset;

`sub`

實現(xiàn)類似于<sub>標簽的下標字符效果：

font-variant-position: sub; font-variant-position: normal; font-feature-settings: 'subs' 1; font-feature-settings: 'subs' 0;

`super`

實現(xiàn)類似于<sup>標簽的上標字符效果：

font-variant-position: super; font-variant-position: normal; font-feature-settings: 'sups' 1; font-feature-settings: 'sups' 0;

`font-variant-caps`

font-variant-caps屬性用來控制字母大寫。只不過這里啟用的是小型大寫。

font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: unset;

`small-caps`

小型大寫字母的設(shè)計與小寫字母相同，用于在運行文本中大寫字母。它們使段落更具內(nèi)聚力和可讀性。

font-variant-caps: small-caps; font-variant-caps: normal; font-feature-settings: 'smcp' 1; font-feature-settings: 'smcp' 0;

`all-small-caps`

small-caps只是替換了小寫字母為大寫字母。要是想將所有字母都變成小的大寫字母，需要使用all-small-caps。

font-variant-caps: all-small-caps; font-variant-caps: normal; font-feature-settings: 'smcp' 1, 'c2sc' 1; font-feature-settings: 'smcp' 1, 'c2sc' 0;

`petite-caps`

標準的小型大寫字母通常會比字體的x高度略大一些。一些字體有額外的小型大寫，與x高度匹配。這些被稱為petite-caps。

font-variant-caps: petite-caps; font-variant-caps: normal; font-feature-settings: 'pcap' 1; font-feature-settings: 'pcap' 0;

`all-petite-caps`

與all-small-caps類似，它將所有字母包括小寫字母和大寫字母，都轉(zhuǎn)換成小型大寫字母，而且和字體的x字母高度相匹配。

font-variant-caps: all-petite-caps; font-variant-caps: normal; font-feature-settings: 'pcap' 1, 'c2pc' 1; font-feature-settings: 'pcap' 1, 'c2pc' 0;

`unicase`

該功能將大寫和小寫字母映射到混合的小寫字母和小寫的大型字母，創(chuàng)建一個單一case的字母表。有時這些小寫字母是實際的小型大寫字母，有時它們是特別設(shè)計的unicase形式。這個特性的實現(xiàn)從字體到字體各不相同。

font-variant-caps: unicase; font-variant-caps: normal; font-feature-settings: 'unic' 1; font-feature-settings: 'unic' 0;

`titling-caps`

標準的大寫字母設(shè)計是用來與小寫字母一起使用的，當它們被用在所有大寫字母的字符串時，它們會顯得過于大一點。有些字體還特別適合這種情況。

font-variant-caps: titling-caps; font-variant-caps: normal; font-feature-settings: 'titl' 1; font-feature-settings: 'titl' 0;

`font-variant-numeric`

font-variant-numeric屬性用來控制對數(shù)字、分數(shù)和序號標記的處理。數(shù)字的正確顯示取決于上下文的不同，以下是一些一般性的規(guī)則：

運行于文本正文中的數(shù)字，使用比例的是舊式數(shù)字
運行在標題中的數(shù)字，使用的比例是內(nèi)聯(lián)數(shù)字
在數(shù)字表格中的數(shù)字，使用的比例是表格內(nèi)聯(lián)數(shù)字

常用的屬性：

font-variant-numeric: normal;font-variant-numeric: ordinal;font-variant-numeric: slashed-zero;font-variant-numeric: lining-nums;         font-variant-numeric: oldstyle-nums;       font-variant-numeric: proportional-nums;   font-variant-numeric: tabular-nums;        font-variant-numeric: diagonal-fractions;  font-variant-numeric: stacked-fractions;   font-variant-numeric: oldstyle-nums stacked-fractions;font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: unset;

`lining-nums`

lining-nums里的數(shù)字近似大寫字母，高度一致。它們應(yīng)該用于標題或表格中的數(shù)字。通常情況下，數(shù)字是默認的。

font-variant-numeric: lining-nums; font-variant-numeric: normal; font-feature-settings: 'lnum' 1; font-feature-settings: 'lnum' 0;

`oldstyle-nums`

舊式數(shù)字（Old-style）有不同的高度和對齊方式，因此更類似于小寫字母。它們應(yīng)該用于正文文本中。

font-variant-numeric: oldstyle-nums; font-variant-numeric: normal; font-feature-settings: 'onum' 1; font-feature-settings: 'onum' 0;

`proportional-nums`

比例（Proportional）數(shù)字具有可變的間距，并與水平文本相融合。它們應(yīng)該在大多數(shù)情況下使用，除了數(shù)據(jù)表格中。其中垂直對齊很重要。通常數(shù)字在默認情況下是比例數(shù)字。

font-variant-numeric: proportional-nums; font-variant-numeric: normal; font-feature-settings: 'pnum' 1; font-feature-settings: 'pnum' 0;

`tabular-nums`

表格數(shù)字具有相同的寬度，應(yīng)該在數(shù)據(jù)表格中使用，以允許數(shù)字垂直對齊。

font-variant-numeric: tabular-nums; font-variant-numeric: normal; font-feature-settings: 'tnum' 1; font-feature-settings: 'tnum' 0;

`diagonal-fractions`

默認情況下，分數(shù)將以小寫字母的形式顯示。適當?shù)姆謹?shù)將被格式化，以匹配一個襯里圖形的高度，可以是對象線或堆疊。

font-variant-numeric: diagonal-fractions; font-variant-numeric: normal; font-feature-settings: 'frac' 1; font-feature-settings: 'frac' 0;

`stacked-fractions`

在大多數(shù)Web字體中，堆疊分數(shù)并不像對角線分數(shù)那樣普遍，但它應(yīng)該被證明是有用的。這在大量的科學(xué)或數(shù)學(xué)中用得多。

font-variant-numeric: stacked-fractions; font-variant-numeric: normal; font-feature-settings: 'afrc' 1; font-feature-settings: 'afrc' 0;

`ordinal`

Ordinal像st、nd、rd和th這樣的序號默認顯示為標準小寫字母。然而，理想情況下，這些數(shù)字會隨著數(shù)字的增加而增加。序數(shù)值支持這一點。

font-variant-numeric: ordinal; font-variant-numeric: normal; font-feature-settings: 'ordn' 1; font-feature-settings: 'ordn' 0;

`slashed-zero`

可以使用斜線來替換零字符。

font-variant-numeric: slashed-zero; font-variant-numeric: normal; font-feature-settings: 'zero' 1; font-feature-settings: 'zero' 0;

`font-variant-alternates`

字體可以為任何字符提供多種替換。font-variant-alternates屬性提供了許多控制字符替換的方法。

font-variant-alternates: normal;
font-variant-alternates: historical-forms;font-variant-alternates: stylistic(user-defined-ident);
font-variant-alternates: styleset(user-defined-ident);font-variant-alternates: character-variant(user-defined-ident);
font-variant-alternates: swash(user-defined-ident);
font-variant-alternates: ornaments(user-defined-ident);
font-variant-alternates: annotation(user-defined-ident);
font-variant-alternates: swash(ident1) annotation(ident2);font-variant-alternates: initial;
font-variant-alternates: inherit;
font-variant-alternates: unset;

`historical-forms`

被運用于周期表。請注意這與連接中的效果還是有不同之處。

font-variant-numeric: historical-forms; font-variant-numeric: normal; font-feature-settings: 'hist' 1; font-feature-settings: 'hist' 0;

除此之外，根據(jù)不同的場景選擇不同的屬性值。

`font-variation-settings`

font-variation-settings屬性主要用于指定需要更改的特性，其主要有由個字母和它們的變化值組成。該屬性提供了對OpenType或TrueType字體變體的在低瀏覽器的控制。

font-variation-settings: normal;font-variation-settings: "XHGT" 0.7;font-variation-settings: inherit;
font-variation-settings: initial;
font-variation-settings: unset;

這就是在我們文章的開頭的示例中看到的font-variation-settings: 'INLN' 0;和font-variation-settings: 'INLN' 1000, 'SWRM' 1000;等。每個值都有4個ASCII字符和一個表示axis值的數(shù)字組成。如果<string>有更多或更少的字符或包含U+20至U+7E的codepoint范圍之外的字符，那么整個屬性都是無效的。而<number>可以是分數(shù)，也可以是負數(shù)。

總結(jié)

擼了一圈font-variation-*相關(guān)的屬性，總算是了解了這個Demo的實現(xiàn)原理了。但要完全掌握這些知識，還是需要一定的時間的。必竟有很多知識點都和字體以及排版相關(guān)的。這需要具備一些印刷相關(guān)的知識，或許能幫助我們更好的掌握這些屬性的特性，以及使用的場景。

另外，目前這些屬性，瀏覽器能支持的為數(shù)不多，不過不要緊，感興趣的可以玩玩，體驗一下。或者自己把文章開頭的示例修改一下下，說不定能達到另外的效果。

相關(guān)推薦：

CSS3 font-feature-settings特性減除字體動畫震顫效果實例分享

javascript字體顏色控件的開發(fā)

CSS的文本字體顏色如何設(shè)置

以上就是css3字體變體font-variation詳解的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

久久久久在线观看_又色又爽又黄的免费视频播放_一区中文字幕_日韩电影在线播放

css3字體變體font-variation詳解

font-variant-*屬性

font-variant-ligatures

common-ligatures

discretionary-ligatures

contextual

font-variant-position

sub

super

font-variant-caps

small-caps

all-small-caps

petite-caps

all-petite-caps

unicase

titling-caps

font-variant-numeric

lining-nums

oldstyle-nums

proportional-nums

tabular-nums

diagonal-fractions

stacked-fractions

ordinal

slashed-zero

font-variant-alternates

historical-forms

font-variation-settings