亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

中文Chrome最小字體問題

mochixuan / 3478人閱讀

摘要：問題中文中最小字體為，設(shè)置更小字體的解決辦法解決辦法移動端的瀏覽器，禁止瀏覽器配置調(diào)整網(wǎng)頁的字體大小，可以通過屬性來禁止網(wǎng)頁調(diào)整字體大小，該屬性用來設(shè)定文字大小是否根據(jù)設(shè)備瀏覽器來自動調(diào)整顯示大小，，可以支持。

問題：中文Chrome中最小字體為12px，設(shè)置更小字體的解決辦法

解決辦法：

移動端的Chrome瀏覽器，禁止webkit瀏覽器配置調(diào)整網(wǎng)頁的字體大小， 可以通過CSS屬性
-webkit-text-size-adjust來禁止網(wǎng)頁調(diào)整字體大小，該屬性用來設(shè)定文字大小是否根據(jù)設(shè)備(瀏覽器)來自動調(diào)整顯示大小，safari 3.0+，chrome 1.0+可以支持。屬性值，可以為三種：

percentage：字體顯示的大小

auto：默認(rèn)，字體大小會根據(jù)設(shè)備/瀏覽器來自動調(diào)整

none:字體大小不會自動調(diào)整

    .fs-8 {
       -webkit-text-size-adjust: none;
       font-size: 8px; 
    }

注意:

不合理的使用-webkit-text-size-adjust:none會造成許多不好的影響。比如將其定義為全局屬性的話，在Chrome中當(dāng)用戶放大縮小頁面（PC上按住Ctrl滾動鼠標(biāo)滾輪可縮放網(wǎng)頁）的時(shí)候，文字卻維持定義的大小而不放縮，給用戶帶來的不太友好的體驗(yàn)。所以我們在使用時(shí)，最好定義為局部有效。

由于沒有 -o-text-size-adjust，這樣的CSS 屬性，在 Opera，我們就只能通過自己手動設(shè)置了：工具->首選項(xiàng)->高級->字體->最小字體大?。ㄏ袼兀?/p>

PC端的Chrome瀏覽器，Chrome 27正式取消了-webkit-text-size-adjust屬性的支持，在PC端使用該屬性都不會起作用，控制臺會顯示Unknown property name。解決辦法是使用CSS3中的transform, 該該元素縮小n倍，如：

.fs-10 {
    font-size: 12px;
    width: 118%;

    -webkit-transform: scale(0.82) translate(-9%, 0px);
    -moz-transform: scale(0.82) translate(-9%, 0px);
    -ms-transform: scale(0.82) translate(-9%, 0px);
    -o-transform: scale(0.82) translate(-9%, 0px);
    transform: scale(0.82) translate(-9%, 0px);
}
// sass mixin
@mixin webkit-font-size($size: 10) {
  font-size: 12px;
  width: percentage((1 - $size / 12) + 1);

  -webkit-transform: scale($size / 12) translate(percentage(-(1 - $size / 12) / 2), 0);
  -moz-transform: scale($size / 12) translate(percentage(-(1 - $size / 12) / 2), 0);
  -ms-transform: scale($size / 12) translate(percentage(-(1 - $size / 12) / 2), 0);
  -o-transform: scale($size / 12) translate(percentage(-(1 - $size / 12) / 2), 0);
  transform: scale($size / 12) translate(percentage(-(1 - $size / 12) / 2), 0);
}

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

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

相關(guān)文章

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

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

    sutaking 評論0 收藏0

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

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

    Vultr 評論0 收藏0

  • 最標(biāo)準(zhǔn)的系統(tǒng)字體規(guī)范font-family

    摘要：最標(biāo)準(zhǔn)的系統(tǒng)字體規(guī)范注意系統(tǒng)默認(rèn)字體和瀏覽器默認(rèn)字體這個(gè)差別。值得一提的是，上默認(rèn)的中文字體渲染是華文黑體，而非作為系統(tǒng)字體的蘋方即冬青黑體，是我們整個(gè)中唯一不是系統(tǒng)字體的字體。我們標(biāo)準(zhǔn)化的核心思路是使用系統(tǒng)字體。 最標(biāo)準(zhǔn)的系統(tǒng)字體規(guī)范font-family 注意系統(tǒng)默認(rèn)字體和瀏覽器默認(rèn)字體這個(gè)差別。 直接提供方案： font: 14px/1.6 /*西文*/-apple-syste...

    kk_miles 評論0 收藏0

  • centos使用chrome-cli、chromium或wkhtmltoimage截圖時(shí)出現(xiàn)的中文字

    摘要：后來換了各種系統(tǒng)環(huán)境，包括更改中文支持，依然如故，只有在自己的上是正常的。查看是否有中文字體，一般情況下是不存在的，否則也不會亂碼。再一次運(yùn)行程序腳本，查看截圖是否包含正常的中文字符。 在centos7環(huán)境下使用chrome-php或wkhtmltoimage截圖時(shí)出現(xiàn)的中文亂碼解決方案 最近做了一個(gè)小項(xiàng)目，要求使用chrome/chromium對抓取的頁面進(jìn)行截圖保存并上傳云服務(wù)，因...

    ivyzhang 評論0 收藏0

發(fā)表評論

0條評論

mochixuan

男|高級講師

TA的文章

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