資訊專欄INFORMATION COLUMN
摘要：字體排印連字符斷行在雜志和書籍中，經(jīng)常可以見到兩端對齊效果。原因是會帶來糟糕的顯示問題。比如大多數(shù)襯線字體中的和。在第三版中，引入了屬性華麗的符號通過規(guī)則實現(xiàn)只對符號應用特殊的字體。
字體排印 連字符斷行
在雜志和書籍中，經(jīng)?？梢砸姷絻啥藢R效果。但是在網(wǎng)頁設計中，兩端對齊效果很少被使用。
原因是會帶來糟糕的顯示問題。
text-align: justufy;
在css第三版中，引入了一個屬性hyphens:[none, manual, auto]。
使用hyphens:auto;會讓瀏覽器決定什么時候用換行符。前提是提前設置好網(wǎng)頁的HTML標簽的lang屬性。
在線編輯：dabblet JSFiddle
注：使用chrome瀏覽器測試均不正常。使用safari瀏覽器測試正常
考慮如下代碼：
想要的效果如圖：
由于和都是塊級元素，所以在不修改結構的前提下，我們可以使用偽元素實現(xiàn)不破壞語義同時實現(xiàn)此目的
dd + dd::before {
content: ", ";
font-weight: normal;
margin-left: -.25em;
}
文本行的斑馬條紋
斑馬條紋在UI設計中十分常見。我們可以使用:nth-child()/:nth-of-type()偽類來對奇數(shù)行和偶數(shù)行設置不同的背景，也可以使用不同的div去包裹奇數(shù)行和偶數(shù)行?，F(xiàn)在我們還有一種簡單的方法實現(xiàn)這一目的：對元素設置條紋背景
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;//設置background-position基準以content box為準
font-family: Consolas, Monaco, monospace;
}
調(diào)整tab寬度
在網(wǎng)頁中，通常使用或者來顯示代碼。它們tab會被解析成8個字符。
而我們通常希望將其設置為4或者2。在CSS第三版中，增加了屬性tab-size可以用來控制這個屬性.
pre {
tab-size: 2
}
連字
某些字形與字形相鄰時會帶來顯示上的問題。比如大多數(shù)襯線字體中的f和i。在css第三版中，引入了font-variant-ligatures屬性
font-variant-ligatures: comon-ligatures
discretionary-ligatures
historical-ligatures
華麗的&符號
通過@font-face規(guī)則實現(xiàn)只對&符號應用特殊的字體。感覺方法不是很通用，先不做深入研究。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/111598.html
摘要：連字符斷行需要在的屬性指定支持的語言尚未支持與結合使用插入換行避免首個前面也加入空行換行符避免逗號前面的空格，不一定為文本行的斑馬條紋調(diào)整的寬度連字華麗的符號自定義下劃線現(xiàn)實中的文字效果發(fā)光字效果環(huán)形文字 連字符斷行 hyphens:auto; *:需要在HTML的lang屬性指定支持的語言**：chrome尚未支持*：與word-wrap: break-word結合使用 插入換行 d...
摘要：通過模糊來弱化背景和滾動提示使用兩層背景，控制交互式的圖片對比控件范圍輸入控件方式書中有很詳細的解答提醒自己要回顧。 1. 第一章 css編碼技巧 第二章 邊框與背景 半透明邊框 hsla 多重邊框 box-shadow outline 靈活的背景定位 background-position css3該屬性可以指定偏移量，////bac...
摘要：案例全套地址案例地址去年買了一本揭秘的專題書，該書揭示了個鮮為人知的技巧，主要內(nèi)容包括背景與邊框形狀視覺效果字體排印用戶體驗結構與布局過渡與動畫等。去年買入時，就決定將里面所有案例全部擼一遍，作為自己年學習清單中的首項。 Css Secret 案例全套 github地址 案例地址 去年買了一本CSS揭秘的css專題書，該書揭示了 47 個鮮為人知的 CSS 技巧，主要內(nèi)容包括背景與邊...
摘要：作為女性，你又來自互聯(lián)網(wǎng)技術不太發(fā)達的希臘。希臘目前可能還存在一些針對女性的性別歧視，但并不明顯，不然我可能會被影響到。實際上，有時候希臘在性別平等方面比其他西方國家更進步。 本文僅用于學習和交流，不用于商業(yè)目的。非商業(yè)轉載請注明作譯者、出處，并保留本文的原始鏈接：http://www.ituring.com.cn/art... 訪談嘉賓： Lea VerouW3C CSS工作組特邀專...
摘要：作為女性，你又來自互聯(lián)網(wǎng)技術不太發(fā)達的希臘。希臘目前可能還存在一些針對女性的性別歧視，但并不明顯，不然我可能會被影響到。實際上，有時候希臘在性別平等方面比其他西方國家更進步。 本文僅用于學習和交流，不用于商業(yè)目的。非商業(yè)轉載請注明作譯者、出處，并保留本文的原始鏈接：http://www.ituring.com.cn/art... 訪談嘉賓： Lea VerouW3C CSS工作組特邀專...
閱讀 1281·2021-11-15 18:14
閱讀 3166·2021-08-25 09:38
閱讀 2673·2019-08-30 10:55
閱讀 2703·2019-08-29 16:39
閱讀 1315·2019-08-29 15:07
閱讀 2457·2019-08-29 14:14
閱讀 820·2019-08-29 12:36
閱讀 921·2019-08-29 11:21
