国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

《CSS揭秘》第五章：字體排印

lk20150415 / 922人閱讀

摘要：字體排印連字符斷行在雜志和書(shū)籍中，經(jīng)?？梢砸?jiàn)到兩端對(duì)齊效果。原因是會(huì)帶來(lái)糟糕的顯示問(wèn)題。比如大多數(shù)襯線字體中的和。在第三版中，引入了屬性華麗的符號(hào)通過(guò)規(guī)則實(shí)現(xiàn)只對(duì)符號(hào)應(yīng)用特殊的字體。

字體排印 連字符斷行

在雜志和書(shū)籍中，經(jīng)?？梢砸?jiàn)到兩端對(duì)齊效果。但是在網(wǎng)頁(yè)設(shè)計(jì)中，兩端對(duì)齊效果很少被使用。
原因是會(huì)帶來(lái)糟糕的顯示問(wèn)題。
text-align: justufy;

在css第三版中，引入了一個(gè)屬性hyphens:[none, manual, auto]。
使用hyphens:auto;會(huì)讓瀏覽器決定什么時(shí)候用換行符。前提是提前設(shè)置好網(wǎng)頁(yè)的HTML標(biāo)簽的lang屬性。
在線編輯：dabblet JSFiddle
注：使用chrome瀏覽器測(cè)試均不正常。使用safari瀏覽器測(cè)試正常

插入換行

考慮如下代碼：


    
Name:

    
Versdf


    
Email:

    
hfd@fas.me


    
Location:

    
Earth

想要的效果如圖：

由于

和
都是塊級(jí)元素，所以在不修改結(jié)構(gòu)的前提下，我們可以使用偽元素實(shí)現(xiàn)不破壞語(yǔ)義同時(shí)實(shí)現(xiàn)此目的

dd + dd::before {
    content: ", ";
    font-weight: normal;
    margin-left: -.25em;
}
文本行的斑馬條紋

斑馬條紋在UI設(shè)計(jì)中十分常見(jiàn)。我們可以使用:nth-child()/:nth-of-type()偽類來(lái)對(duì)奇數(shù)行和偶數(shù)行設(shè)置不同的背景，也可以使用不同的div去包裹奇數(shù)行和偶數(shù)行?，F(xiàn)在我們還有一種簡(jiǎn)單的方法實(shí)現(xiàn)這一目的：對(duì)元素設(shè)置條紋背景

pre { 
    padding: .5em;
    line-height: 1.5;
    background: hsl(20, 50%, 95%);
    background-image: linear-gradient(
                      rgba(120,0,0,.1) 50%, transparent 0);
    background-size: auto 3em;//北京高度為line-height的兩倍
    background-origin: content-box;//設(shè)置background-position基準(zhǔn)以content box為準(zhǔn)
    font-family: Consolas, Monaco, monospace;
}

調(diào)整tab寬度

在網(wǎng)頁(yè)中，通常使用

或者來(lái)顯示代碼。它們tab會(huì)被解析成8個(gè)字符。




而我們通常希望將其設(shè)置為4或者2。在CSS第三版中，增加了屬性tab-size可以用來(lái)控制這個(gè)屬性.


pre {
    tab-size: 2
}




連字

某些字形與字形相鄰時(shí)會(huì)帶來(lái)顯示上的問(wèn)題。比如大多數(shù)襯線字體中的f和i。在css第三版中，引入了font-variant-ligatures屬性


font-variant-ligatures: comon-ligatures
                        discretionary-ligatures
                        historical-ligatures

華麗的&符號(hào)

通過(guò)@font-face規(guī)則實(shí)現(xiàn)只對(duì)&符號(hào)應(yīng)用特殊的字體。感覺(jué)方法不是很通用，先不做深入研究。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/111598.html

相關(guān)文章

  • [CSS]《CSS揭秘》第五章——字體排印

    摘要：連字符斷行需要在的屬性指定支持的語(yǔ)言尚未支持與結(jié)合使用插入換行避免首個(gè)前面也加入空行換行符避免逗號(hào)前面的空格，不一定為文本行的斑馬條紋調(diào)整的寬度連字華麗的符號(hào)自定義下劃線現(xiàn)實(shí)中的文字效果發(fā)光字效果環(huán)形文字 連字符斷行 hyphens:auto; *:需要在HTML的lang屬性指定支持的語(yǔ)言**：chrome尚未支持*：與word-wrap: break-word結(jié)合使用 插入換行 d...

    lordharrd 評(píng)論0 收藏0

  • css-secrets (css揭秘) 知識(shí)點(diǎn)目錄，值得深入學(xué)習(xí)！

    摘要：通過(guò)模糊來(lái)弱化背景和滾動(dòng)提示使用兩層背景，控制交互式的圖片對(duì)比控件范圍輸入控件方式書(shū)中有很詳細(xì)的解答提醒自己要回顧。 1. 第一章 css編碼技巧 第二章 邊框與背景 半透明邊框 hsla 多重邊框 box-shadow outline 靈活的背景定位 background-position css3該屬性可以指定偏移量，////bac...

    DevWiki 評(píng)論0 收藏0

  • Css Secret 案例全套

    摘要：案例全套地址案例地址去年買(mǎi)了一本揭秘的專題書(shū)，該書(shū)揭示了個(gè)鮮為人知的技巧，主要內(nèi)容包括背景與邊框形狀視覺(jué)效果字體排印用戶體驗(yàn)結(jié)構(gòu)與布局過(guò)渡與動(dòng)畫(huà)等。去年買(mǎi)入時(shí)，就決定將里面所有案例全部擼一遍，作為自己年學(xué)習(xí)清單中的首項(xiàng)。 Css Secret 案例全套 github地址 案例地址 去年買(mǎi)了一本CSS揭秘的css專題書(shū)，該書(shū)揭示了 47 個(gè)鮮為人知的 CSS 技巧，主要內(nèi)容包括背景與邊...

    qpwoeiru96 評(píng)論0 收藏0

  • 《CSS 揭秘》作者Lea Verou：我喜歡分享開(kāi)源的行業(yè)文化

    摘要：作為女性，你又來(lái)自互聯(lián)網(wǎng)技術(shù)不太發(fā)達(dá)的希臘。希臘目前可能還存在一些針對(duì)女性的性別歧視，但并不明顯，不然我可能會(huì)被影響到。實(shí)際上，有時(shí)候希臘在性別平等方面比其他西方國(guó)家更進(jìn)步。 本文僅用于學(xué)習(xí)和交流，不用于商業(yè)目的。非商業(yè)轉(zhuǎn)載請(qǐng)注明作譯者、出處，并保留本文的原始鏈接：http://www.ituring.com.cn/art... 訪談嘉賓： Lea VerouW3C CSS工作組特邀專...

    tianyu 評(píng)論0 收藏0

  • 《CSS 揭秘》作者Lea Verou：我喜歡分享開(kāi)源的行業(yè)文化

    摘要：作為女性，你又來(lái)自互聯(lián)網(wǎng)技術(shù)不太發(fā)達(dá)的希臘。希臘目前可能還存在一些針對(duì)女性的性別歧視，但并不明顯，不然我可能會(huì)被影響到。實(shí)際上，有時(shí)候希臘在性別平等方面比其他西方國(guó)家更進(jìn)步。 本文僅用于學(xué)習(xí)和交流，不用于商業(yè)目的。非商業(yè)轉(zhuǎn)載請(qǐng)注明作譯者、出處，并保留本文的原始鏈接：http://www.ituring.com.cn/art... 訪談嘉賓： Lea VerouW3C CSS工作組特邀專...

    yzd 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<