欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解android 中文字體向上偏移解決方案

 更新時間:2019年01月10日 09:24:07   作者:darcrand  
這篇文章主要介紹了詳解android 中文字體向上偏移解決方案,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

在開發(fā) webapp 時,發(fā)現(xiàn)在 android 端的中文會莫名其妙的向上偏移。為了解決這個問題,嘗試了很多方法,最后使用以下解決方案。

1.bug 出現(xiàn)

目前在開發(fā) webapp,在調(diào)試的時候,發(fā)現(xiàn)項目里面的中文有一點向上偏移。具體表現(xiàn)為:使用開發(fā)者工具去查看元素,元素的真實高度和位置與文字不同。列如,一個spanfont-sizeline-height都設(shè)置為16px,在調(diào)試時,元素的高度確實是16px,但是,中文的高度看起來并不止16px,而且顯示的位置明顯超出了元素的尺寸范圍,向上偏移。

開始的時候還以為是樣式導(dǎo)致的,于是嘗試各種修改 css,但是完全沒有用。后來在網(wǎng)上看到用“定位”或者“上邊距”來強制文字的位置,但是發(fā)現(xiàn)這個方法太麻煩了,最終放棄這個方案。
后來想到使用的是ubuntu,懷疑可能是系統(tǒng)默認(rèn)字體的原因?qū)е铝诉@個問題。于是下載了一個字體文件(用的是“思源黑體”)。然后配置全局字體,發(fā)現(xiàn)可以解決這個問題。

2.第二個問題出現(xiàn)

雖然使用自定義字體解決了中文文字偏移的問題,但是由于字體文件太大導(dǎo)致性能很不理想。無論是將字體文件放到服務(wù)器還是使用 cdn 都不理想。最終找到了fontmin這個插件。這個插件的原理是將字體文件中的字符集進(jìn)行篩選,生成的新的字體文件中,只包含要使用到的文字字符集。

3.最終的方案

雖然fontmin可以進(jìn)行字符集篩選,但是項目中到底需要哪些中文文字是不確定的。但沒有關(guān)系,經(jīng)過實驗,使用一個只有0這個字符集的字體文件同樣可以解決我們最初的問題。下面來看實現(xiàn)步驟。

3.1 字體下載

到網(wǎng)上下載一個中文字體,這里我使用的是google fonts。先測試一下,直接引用這個字體后,是否可以解決字體偏移??梢缘脑挘M(jìn)行下一步。

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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Android中驗證碼倒計時的簡單實現(xiàn)方法示例

    Android中驗證碼倒計時的簡單實現(xiàn)方法示例

    最近開發(fā)中在注冊獲取驗證碼時候需要一個倒計時按鈕,找了相關(guān)的資料終于實現(xiàn)了,所以現(xiàn)在分享給大家,下面這篇文章主要給大家介紹了關(guān)于Android中驗證碼倒計時簡單實現(xiàn)的相關(guān)資料,需要的朋友可以參考借鑒。
    2017-06-06
  • Android中ViewPager的PagerTabStrip與PagerTitleStrip用法實例

    Android中ViewPager的PagerTabStrip與PagerTitleStrip用法實例

    這篇文章主要介紹了Android中ViewPager的PagerTabStrip與PagerTitleStrip用法實例,這兩個子控件一般被用作添加標(biāo)題,在實際效果上并不是那么好控制,使用的時候需要謹(jǐn)慎,需要的朋友可以參考下
    2016-06-06
  • Android編程獲取通知欄高度的方法

    Android編程獲取通知欄高度的方法

    這篇文章主要介紹了Android編程獲取通知欄高度的方法,涉及Android針對通知欄屬性相關(guān)操作技巧,需要的朋友可以參考下
    2016-01-01
  • Android實現(xiàn)果凍滑動效果的控件

    Android實現(xiàn)果凍滑動效果的控件

    這篇文章給大家主要介紹了利用Android如何實現(xiàn)果凍效果滑動效果的控件,實現(xiàn)的效果類似于iOS有阻尼效果的滑動控件,一般我們比較親切地稱之為果凍控件,常見的如微信里[我]的那個面板模塊,即使沒有再多的選項,也不會很生硬的不允許用戶滑動。下面來一起看看吧。
    2016-11-11
  • Android Service中使用Toast無法正常顯示問題的解決方法

    Android Service中使用Toast無法正常顯示問題的解決方法

    這篇文章主要介紹了Android Service中使用Toast無法正常顯示問題的解決方法,分析了Service中Toast無法正常顯示的原因與相關(guān)的解決方法,具有一定參考借鑒價值,需要的朋友可以參考下
    2016-10-10
  • Android漲姿勢知識點之你沒用過的BadgeDrawable

    Android漲姿勢知識點之你沒用過的BadgeDrawable

    現(xiàn)在Android中有許多的應(yīng)用仿蘋果的在應(yīng)用圖標(biāo)上顯示小紅點,下面這篇文章主要給大家介紹了關(guān)于Android漲姿勢知識點之你沒用過的BadgeDrawable的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09
  • 在Visual Studio上構(gòu)建C++的GUI框架wxWidgets的開發(fā)環(huán)境

    在Visual Studio上構(gòu)建C++的GUI框架wxWidgets的開發(fā)環(huán)境

    這篇文章主要介紹了Visual Studio上構(gòu)件C++的GUI框架wxWidgets開發(fā)環(huán)境的方法,wxWidgets是一個跨多個系統(tǒng)平臺的圖形化界面開發(fā)框架,并且可用語言不限于C++,需要的朋友可以參考下
    2016-04-04
  • Android實現(xiàn)記住用戶名和密碼功能

    Android實現(xiàn)記住用戶名和密碼功能

    登陸界面創(chuàng)建一個復(fù)選按鈕,通過按鈕選取來進(jìn)行事件處理。若按鈕選中記住賬號和密碼的信息,本文教大家如何使用Android實現(xiàn)記住用戶名和密碼功能,感興趣的小伙伴們可以參考一下
    2016-05-05
  • Android 中 TabHost與ViewPager結(jié)合實現(xiàn)首頁導(dǎo)航效果

    Android 中 TabHost與ViewPager結(jié)合實現(xiàn)首頁導(dǎo)航效果

    這篇文章主要介紹了Android 中 TabHost與ViewPager結(jié)合實現(xiàn)首頁導(dǎo)航效果,代碼簡單易懂,感興趣的朋友參考下吧
    2016-09-09
  • Android動態(tài)表格的實現(xiàn)代碼(內(nèi)容、樣式可擴(kuò)縮)

    Android動態(tài)表格的實現(xiàn)代碼(內(nèi)容、樣式可擴(kuò)縮)

    這篇文章主要介紹了Android動態(tài)表格的實現(xiàn)代碼(內(nèi)容、樣式可擴(kuò)縮),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-09-09

最新評論