中文Chrome最小字體問題

mochixuan 發布于2019-08-29 11:33 / 3419人閱讀

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

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

解決辦法：

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

percentage：字體顯示的大小

auto：默認，字體大小會根據設備/瀏覽器來自動調整

none:字體大小不會自動調整

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

注意:

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

由于沒有 -o-text-size-adjust，這樣的CSS 屬性，在 Opera，我們就只能通過自己手動設置了：工具->首選項->高級->字體->最小字體大小（像素）。

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);
}

GPU云服務器云服務器 html取消最小字體最小化問題中文字體安裝中文字體

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

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

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

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

sutaking 2019-08-23 13:50 評論0 收藏0
一篇文章了解移動端文本垂直居中

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

Vultr 2019-08-29 17:28 評論0 收藏0
最標準的系統字體規范font-family

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

kk_miles 2019-08-29 13:43 評論0 收藏0
centos使用chrome-cli、chromium或wkhtmltoimage截圖時出現的中文字

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

ivyzhang 2019-07-01 12:37 評論0 收藏0