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

資訊專欄INFORMATION COLUMN

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

ideaa / 1041人閱讀

摘要：前言本文主要探索在安卓系統下瀏覽器中小字號中文居中的實現以及在混排時的對齊處理。神奇的安卓字體根據所述，文字中從小到大可以劃出三個區域，分別是，和。但是，部分安卓機器字體的字形不居中于，卻居中于。

前言

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

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

神奇的安卓字體

根據《Deep》所述，文字中從小到大可以劃出三個區域，分別是em-square，content-area和virtual-area。一般情況下，前一個區域大致居中與后一個區域，而文字本身也大致居中于這個區域。因此無論是采用哪種line-height,文字居中于line-box看起來都是一件理所當然的事。
但是，對于部分安卓系統的默認字體而言卻不是這樣。

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

應用

綜上，line-height:normal可以使文字在那些奇怪的安卓機器上實現垂直居中。當然，這條樣式會帶來一個問題，即高度line-box的高度不可控，此時就需要前文所說的flex或tabel-cell將line-box
相對于外層容器居中，然后在外層容器設置高度即可。

下面是使用實例，起作用的樣式是display: flex;align-items: center兩條。創建一個彈性容器，然后將該容器的子元素居中，這樣virtual-area多出來的部分就溢出到邊框之外，而不會影響布局了。
圖中紅框內的淺灰色區域為高度12px的容器，深灰色為高度16px的line-box和virtual-area。最終實現了將12px大小的文字居中于12px大小的容器中的目的。

國

總結

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

PS:這種方案應用于多行文本的時，無法手動控制行間距，只能使用字體設計師決定的默認行間距。在需要手動控制行間距時，還是建議放棄此方案，反正對于多行文本，1~2px的偏移對整體視覺展現不會有太大的影響
。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112655.html

相關文章

  • 關于vertical-align

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

    kumfo 評論0 收藏0

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

    摘要：接下來說句聽起來很奇怪的話一個內聯元素有兩個高度高度和實際區域高度是我自己發明的單詞，它表示對人類有效的高度，你在其他地方是看不到這個單詞的。你沒看錯，是計算的一些細節對于內聯元素，和會增大區域，但是不會增大不是的高度。 本文為饑人谷講師方方原創文章，首發于 前端學習指南。 這是一篇譯文，對 inline 和 inline-block 的元素剖析非常給力。 原文：Deep dive C...

    Dean 評論0 收藏0

  • CSS居中

    摘要：備份及更新說明表示要被居中的元素，表示要居中的元素的父元素包含元素的元素。左右居中要居中的塊級元素元素設置。網格布局居中根據需要布局網格，將要居中的元素擺放在網格中間即可。 [TOC]備份及更新 說明 .center表示要被居中的元素，.wrap 表示要居中的元素的父元素（包含.center元素的元素）。 為了便于理解和敘述同一： 對于文本內容居中的情況，.wrap就是指包含文...

    劉永祥 評論0 收藏0

  • 一篇文章了解移動端文本垂直居中

    摘要：經常我們在瀏覽器上調試的好好的，但是到了移動端就會有各種奇特的適配問題最經常遇見莫過于中文字稍微偏上了。為什么中文本偏上文本都會有一個內容區域，這個區域就是我們選中文本時展示的區域。 在日常工作中，經常會遇到圖片+文字+背景色的設計稿實現。經常我們在Chrome瀏覽器上調試的好好的，但是到了移動端就會有各種奇特的適配問題——最經常遇見莫過于Android中文字稍微偏上了。在iOS和An...

    sutaking 評論0 收藏0

  • 一篇文章了解移動端文本垂直居中

    摘要：經常我們在瀏覽器上調試的好好的，但是到了移動端就會有各種奇特的適配問題最經常遇見莫過于中文字稍微偏上了。為什么中文本偏上文本都會有一個內容區域，這個區域就是我們選中文本時展示的區域。 在日常工作中，經常會遇到圖片+文字+背景色的設計稿實現。經常我們在Chrome瀏覽器上調試的好好的，但是到了移動端就會有各種奇特的適配問題——最經常遇見莫過于Android中文字稍微偏上了。在iOS和An...

    Vultr 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<