詳解android 中文字體向上偏移解決方案
在開發(fā) webapp 時,發(fā)現(xiàn)在 android 端的中文會莫名其妙的向上偏移。為了解決這個問題,嘗試了很多方法,最后使用以下解決方案。
1.bug 出現(xiàn)
目前在開發(fā) webapp,在調試的時候,發(fā)現(xiàn)項目里面的中文有一點向上偏移。具體表現(xiàn)為:使用開發(fā)者工具去查看元素,元素的真實高度和位置與文字不同。列如,一個span
的font-size
和line-height
都設置為16px
,在調試時,元素的高度確實是16px
,但是,中文的高度看起來并不止16px
,而且顯示的位置明顯超出了元素的尺寸范圍,向上偏移。
開始的時候還以為是樣式導致的,于是嘗試各種修改 css,但是完全沒有用。后來在網(wǎng)上看到用“定位”或者“上邊距”來強制文字的位置,但是發(fā)現(xiàn)這個方法太麻煩了,最終放棄這個方案。
后來想到使用的是ubuntu
,懷疑可能是系統(tǒng)默認字體的原因導致了這個問題。于是下載了一個字體文件(用的是“思源黑體”)。然后配置全局字體,發(fā)現(xiàn)可以解決這個問題。
2.第二個問題出現(xiàn)
雖然使用自定義字體解決了中文文字偏移的問題,但是由于字體文件太大導致性能很不理想。無論是將字體文件放到服務器還是使用 cdn 都不理想。最終找到了fontmin這個插件。這個插件的原理是將字體文件中的字符集
進行篩選,生成的新的字體文件中,只包含要使用到的文字字符集。
3.最終的方案
雖然fontmin
可以進行字符集篩選,但是項目中到底需要哪些中文文字是不確定的。但沒有關系,經(jīng)過實驗,使用一個只有0
這個字符集的字體文件同樣可以解決我們最初的問題。下面來看實現(xiàn)步驟。
3.1 字體下載
到網(wǎng)上下載一個中文字體,這里我使用的是google fonts。先測試一下,直接引用這個字體后,是否可以解決字體偏移??梢缘脑?,進行下一步。
3.2 安裝 fontmin
這里不推薦全局安裝,在項目里面安裝即可。
npm install fontmin -D
然后編寫配置文件。這里我是寫在項目根目錄的。
// fontmin-config.js var Fontmin = require("fontmin") var srcPath = "./src/assets/fonts/my-font.ttf" // 字體源文件 var destPath = "./src/assets/font-output/" // 輸出路徑 var text = "0" // 篩選的字符集 var fontmin = new Fontmin() .src(srcPath) // 輸入配置 .use( Fontmin.glyph({ text: text }) ) .dest(destPath) // 輸出配置 fontmin.run(function(err, files, stream) { if (err) { console.error(err) } console.log("done") })
然后執(zhí)行
cd your-project-dir node ./fontmin-config.js
3.3 配置 css
// global.css @font-face { font-family: "my-font"; src: url("../fonts/my-font.ttf"); } html,body{ font-family: "my-font", sans-serif; }
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Android中ViewPager的PagerTabStrip與PagerTitleStrip用法實例
這篇文章主要介紹了Android中ViewPager的PagerTabStrip與PagerTitleStrip用法實例,這兩個子控件一般被用作添加標題,在實際效果上并不是那么好控制,使用的時候需要謹慎,需要的朋友可以參考下2016-06-06Android Service中使用Toast無法正常顯示問題的解決方法
這篇文章主要介紹了Android Service中使用Toast無法正常顯示問題的解決方法,分析了Service中Toast無法正常顯示的原因與相關的解決方法,具有一定參考借鑒價值,需要的朋友可以參考下2016-10-10Android漲姿勢知識點之你沒用過的BadgeDrawable
現(xiàn)在Android中有許多的應用仿蘋果的在應用圖標上顯示小紅點,下面這篇文章主要給大家介紹了關于Android漲姿勢知識點之你沒用過的BadgeDrawable的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09在Visual Studio上構建C++的GUI框架wxWidgets的開發(fā)環(huán)境
這篇文章主要介紹了Visual Studio上構件C++的GUI框架wxWidgets開發(fā)環(huán)境的方法,wxWidgets是一個跨多個系統(tǒng)平臺的圖形化界面開發(fā)框架,并且可用語言不限于C++,需要的朋友可以參考下2016-04-04Android 中 TabHost與ViewPager結合實現(xiàn)首頁導航效果
這篇文章主要介紹了Android 中 TabHost與ViewPager結合實現(xiàn)首頁導航效果,代碼簡單易懂,感興趣的朋友參考下吧2016-09-09Android動態(tài)表格的實現(xiàn)代碼(內(nèi)容、樣式可擴縮)
這篇文章主要介紹了Android動態(tài)表格的實現(xiàn)代碼(內(nèi)容、樣式可擴縮),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-09-09