移動端字型失效問題

2021-10-21 17:32:24 字數 725 閱讀 7724

1. 問題:

開發的網頁是華文行楷,在電腦端顯示正確,在移動端顯示失效。

2.原因

我們在一起看看三大主流系統他們字型到底支援哪些呢?

ios 系統

預設中文字型是heiti sc

預設英文本型是helvetica

預設數字字型是helveticaneue

無微軟雅黑字型

android 系統

預設中文字型是droidsansfallback

預設英文和數字字型是droid sans

無微軟雅黑字型

winphone 系統

預設中文字型是dengxian(方正等線體)

預設英文和數字字型是segoe

無微軟雅黑字型

總結:各個手機系統有自己的預設字型,一般不支援我們常用字型,例如微軟雅黑等;

3. 解決辦法

(2)將tff檔案放置在專案static下

(3)在html增加定義,stxingkai1是自定義的字型名稱,可修改

(4)在html增加stxingkai1,華文行楷。其中華文行楷適用於電腦端,stxingkai1適用於移動端。

尊敬的whale女士,字型設定成果

移動端字型

一直不知道手機端用的什麼字型,只是覺得類似雅黑,直到有一次設計師問到設計移動web頁面該用什麼字型才嚴肅地想起這個問題。前人已栽樹,後人我就直接轉來吧 回想2年前剛開始接觸手機專案,接到psd稿後,發現視覺設計師們喜歡用微軟雅黑作為中文字型進行設計,於是我寫頁面的時候也定義 font family ...

fixed在移動端失效的問題

其實在安卓機上fixed的適應性要遠遠比ios上好,真是接地氣啊哈哈。之前第一次遇到這個問題的時候非常驚訝,那時候在用sui mobile的元件庫,裡面就有底部導航欄,用了fixed。但是隨著螢幕向上滾動,超過一定距離,這個底部導航欄竟然也跟著上去了。並且在我的安卓機上是沒多大影響,但是在ios上就...

web頁面移動端滾動失效問題

專案背景 angular7 echarts 4.8.0 開發的web專案。有乙個全是由各種圖表組成的頁面,在android10系統的手機上訪問頁面時,發現滑動介面不能正常的向下滾動,只有滑動非圖表區域的地方,才能滾動。但是在pc端和ios系統的手機,以及android5.1系統的手機上。頁面滾動時沒...