成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

安卓文本居中——關(guān)于css，字體和line-box的筆記

ideaa / 1049人閱讀

摘要：前言本文主要探索在安卓系統(tǒng)下瀏覽器中小字號(hào)中文居中的實(shí)現(xiàn)以及在混排時(shí)的對(duì)齊處理。神奇的安卓字體根據(jù)所述，文字中從小到大可以劃出三個(gè)區(qū)域，分別是，和。但是，部分安卓機(jī)器字體的字形不居中于，卻居中于。

前言

本文主要探索在安卓系統(tǒng)下瀏覽器中小字號(hào)中文居中的實(shí)現(xiàn)以及在混排時(shí)的對(duì)齊處理。本文是受《Deep dive CSS: font metrics, line-height and vertical-align》(以下簡(jiǎn)稱為《Deep》)所啟發(fā)，并以此為基礎(chǔ)所寫，建議先閱讀前文，您也可以選擇閱讀大漠老師或方應(yīng)杭老師的翻譯版。大漠版 方應(yīng)杭版

一直以來(lái)前端最簡(jiǎn)單的文字垂直居中方式就是line-height=height,瀏覽器會(huì)自動(dòng)將line-height大于font-size的部分平分在文字上下，實(shí)現(xiàn)居中效果。但是，當(dāng)網(wǎng)頁(yè)中存在中文特別是10-12px的小字號(hào)中文時(shí)，在部分安卓機(jī)器上出現(xiàn)字符上飄，甚至超出容器的情況。
對(duì)于這種現(xiàn)象，網(wǎng)上流傳著多種解決方案，比如tabel-cell法，flex法等。但是這類方法總是時(shí)靈時(shí)不靈，原因就在于這類方法只解決了將line-box相對(duì)外層容器居中的問(wèn)題，必須要配合line-height:normal實(shí)現(xiàn)文字在line-box內(nèi)居中才能解決問(wèn)題。下文將對(duì)line-height:normal的生效原理和副作用處理進(jìn)行研究。

神奇的安卓字體

根據(jù)《Deep》所述，文字中從小到大可以劃出三個(gè)區(qū)域，分別是em-square，content-area和virtual-area。一般情況下，前一個(gè)區(qū)域大致居中與后一個(gè)區(qū)域，而文字本身也大致居中于這個(gè)區(qū)域。因此無(wú)論是采用哪種line-height,文字居中于line-box看起來(lái)都是一件理所當(dāng)然的事。
但是，對(duì)于部分安卓系統(tǒng)的默認(rèn)字體而言卻不是這樣。

下圖的兩個(gè)字的font-size和height都是10px，左邊一個(gè)line-height為1即等于font-size，右邊一個(gè)則為normal(由于DPR的原因，這里看到的像素點(diǎn)是實(shí)際上的三倍)。由于line-height屬性不同。左邊的line-box大小等于ex-square，右邊的line-box大小等于virtual-area=content-area+line-gap
下圖左側(cè)紅框內(nèi)的淡灰色區(qū)域?yàn)閑m-square，高10px，深灰色區(qū)域?yàn)閏ontent-area高11px，右側(cè)紅框內(nèi)的淡灰色區(qū)域?yàn)関irtual-area高14px。可以看出，此時(shí)em-square位于content-area底部，字形則位于content-area頂部，所以字形完全沒(méi)有居中于ex-square。
而右側(cè)的行為則與《Deep》所述不同，virtual-area相對(duì)content-area多出來(lái)的3px大小的line-gap并不是平均分配與上下，而是全部堆在了頂部。因此恰好看起來(lái)文字居中于virtual-area。

應(yīng)用

綜上，line-height:normal可以使文字在那些奇怪的安卓機(jī)器上實(shí)現(xiàn)垂直居中。當(dāng)然，這條樣式會(huì)帶來(lái)一個(gè)問(wèn)題，即高度line-box的高度不可控，此時(shí)就需要前文所說(shuō)的flex或tabel-cell將line-box
相對(duì)于外層容器居中，然后在外層容器設(shè)置高度即可。

下面是使用實(shí)例，起作用的樣式是display: flex;align-items: center兩條。創(chuàng)建一個(gè)彈性容器，然后將該容器的子元素居中，這樣virtual-area多出來(lái)的部分就溢出到邊框之外，而不會(huì)影響布局了。
圖中紅框內(nèi)的淺灰色區(qū)域?yàn)楦叨?2px的容器，深灰色為高度16px的line-box和virtual-area。最終實(shí)現(xiàn)了將12px大小的文字居中于12px大小的容器中的目的。

國(guó)

總結(jié)

回顧我們以前的做法。我們通常會(huì)為line-height設(shè)置一個(gè)具體的高度該高度就是line-box的高度。而瀏覽器會(huì)將字體的em-square居中于line-box中。對(duì)于大多數(shù)正常字體這么操作就可以實(shí)現(xiàn)垂直居中。
但是，部分安卓機(jī)器字體的字形不居中于em-square，卻居中于virtual-area。此時(shí)通過(guò)line-height:normal樣式使得virtual-area撐滿line-box。從而實(shí)現(xiàn)文字居中于line-box。最后通過(guò)固定外層容器大小然后居中l(wèi)ine-box的方式，消除前面的樣式造成的line-box大小不可控的副作用。

PS:這種方案應(yīng)用于多行文本的時(shí)，無(wú)法手動(dòng)控制行間距，只能使用字體設(shè)計(jì)師決定的默認(rèn)行間距。在需要手動(dòng)控制行間距時(shí)，還是建議放棄此方案，反正對(duì)于多行文本，1~2px的偏移對(duì)整體視覺(jué)展現(xiàn)不會(huì)有太大的影響
。

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

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

相關(guān)文章

  • 關(guān)于vertical-align

    摘要：內(nèi)聯(lián)元素的外邊緣與該行高的頂部和底部邊緣對(duì)齊。如果行高小于字體的高度，不會(huì)受影響，但會(huì)對(duì)齊文本邊界。紅線表示邊界，藍(lán)線表示，黃色為，白色為區(qū)域，綠色為區(qū)域。的確定規(guī)則元素的是它的第一行的。 前言 為什么寫這篇總結(jié)？最近在文字圖標(biāo)垂直對(duì)齊上用到css的vertical-align屬性，但是有的時(shí)候有效，有的時(shí)候無(wú)效，常常疑惑不解，反思這是自己對(duì)vertical-align的基本認(rèn)知不夠造...

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

  • 深入理解 CSS：字體度量、line-height 和 vertical-align

    摘要：接下來(lái)說(shuō)句聽(tīng)起來(lái)很奇怪的話一個(gè)內(nèi)聯(lián)元素有兩個(gè)高度高度和實(shí)際區(qū)域高度是我自己發(fā)明的單詞，它表示對(duì)人類有效的高度，你在其他地方是看不到這個(gè)單詞的。你沒(méi)看錯(cuò)，是計(jì)算的一些細(xì)節(jié)對(duì)于內(nèi)聯(lián)元素，和會(huì)增大區(qū)域，但是不會(huì)增大不是的高度。 本文為饑人谷講師方方原創(chuàng)文章，首發(fā)于 前端學(xué)習(xí)指南。 這是一篇譯文，對(duì) inline 和 inline-block 的元素剖析非常給力。 原文：Deep dive C...

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

  • CSS居中

    摘要：備份及更新說(shuō)明表示要被居中的元素，表示要居中的元素的父元素包含元素的元素。左右居中要居中的塊級(jí)元素元素設(shè)置。網(wǎng)格布局居中根據(jù)需要布局網(wǎng)格，將要居中的元素?cái)[放在網(wǎng)格中間即可。 [TOC]備份及更新 說(shuō)明 .center表示要被居中的元素，.wrap 表示要居中的元素的父元素（包含.center元素的元素）。 為了便于理解和敘述同一： 對(duì)于文本內(nèi)容居中的情況，.wrap就是指包含文...

    劉永祥 評(píng)論0 收藏0

  • 一篇文章了解移動(dòng)端文本垂直居中

    摘要：經(jīng)常我們?cè)跒g覽器上調(diào)試的好好的，但是到了移動(dòng)端就會(huì)有各種奇特的適配問(wèn)題最經(jīng)常遇見(jiàn)莫過(guò)于中文字稍微偏上了。為什么中文本偏上文本都會(huì)有一個(gè)內(nèi)容區(qū)域，這個(gè)區(qū)域就是我們選中文本時(shí)展示的區(qū)域。 在日常工作中，經(jīng)常會(huì)遇到圖片+文字+背景色的設(shè)計(jì)稿實(shí)現(xiàn)。經(jīng)常我們?cè)贑hrome瀏覽器上調(diào)試的好好的，但是到了移動(dòng)端就會(huì)有各種奇特的適配問(wèn)題——最經(jīng)常遇見(jiàn)莫過(guò)于Android中文字稍微偏上了。在iOS和An...

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

  • 一篇文章了解移動(dòng)端文本垂直居中

    摘要：經(jīng)常我們?cè)跒g覽器上調(diào)試的好好的，但是到了移動(dòng)端就會(huì)有各種奇特的適配問(wèn)題最經(jīng)常遇見(jiàn)莫過(guò)于中文字稍微偏上了。為什么中文本偏上文本都會(huì)有一個(gè)內(nèi)容區(qū)域，這個(gè)區(qū)域就是我們選中文本時(shí)展示的區(qū)域。 在日常工作中，經(jīng)常會(huì)遇到圖片+文字+背景色的設(shè)計(jì)稿實(shí)現(xiàn)。經(jīng)常我們?cè)贑hrome瀏覽器上調(diào)試的好好的，但是到了移動(dòng)端就會(huì)有各種奇特的適配問(wèn)題——最經(jīng)常遇見(jiàn)莫過(guò)于Android中文字稍微偏上了。在iOS和An...

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

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

0條評(píng)論

閱讀需要支付1元查看
<