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

lordharrd 發(fā)布于2019-08-30 15:53 / 2941人閱讀

摘要：連字符斷行需要在的屬性指定支持的語(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é)合使用

插入換行

dt,dd{
    display: inline;
}
dd{
    margin: 0;
    font-weight: bold;
}
dd+dt::before{//避免首個(gè)dt前面也加入空行
    content: "A";//換行符
    white-space: pre;
}
dd+dd::before{//
    content:",";
    font-weight: normal;
    margin-left: -0.25em;//避免逗號(hào)前面的空格，不一定為-.25em
}



    Name:
    Lea Verou
    Email:
    lea@verou.me
    leaverou@mit.edu
    Location:
    Earth

文本行的斑馬條紋

.testdiv{
    white-space: pre;
    padding: .5em;
    background: #fb3;
    line-height: 1.5em;
    background-image: linear-gradient(yellowgreen 50%, transparent 0);
    background-size: auto 3em;
    background-origin: content-box;
}

調(diào)整tab的寬度

    tab-size:4;

連字

font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;

華麗的&符號(hào)

......

自定義下劃線

......

現(xiàn)實(shí)中的文字效果 發(fā)光字效果

.testdiv{
    background: #203;
    color: #ffc;
    text-shadow: 0 0 .1em, 0 0 .3em;
}

*:text-shadow: h-shadow v-shadow blur color;

環(huán)形文字

......

GPU云服務(wù)器云服務(wù)器第五章 css字體庫(kù) css 服務(wù)器字體 css3服務(wù)器端字體

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116799.html

相關(guān)文章

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

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

lk20150415 2019-08-29 11:21 評(píng)論0 收藏0
css-secrets (css揭秘) 知識(shí)點(diǎn)目錄，值得深入學(xué)習(xí)！

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

DevWiki 2019-08-30 15:56 評(píng)論0 收藏0
《CSS 揭秘》作者Lea Verou：我喜歡分享開源的行業(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 2019-08-29 11:06 評(píng)論0 收藏0
《CSS 揭秘》作者Lea Verou：我喜歡分享開源的行業(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 2019-08-21 14:14 評(píng)論0 收藏0
《CSS 揭秘》作者Lea Verou：我喜歡分享開源的行業(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工作組特邀專...

leanote 2019-08-01 15:32 評(píng)論0 收藏0