移動端如何兼容UI給的字體

目錄移動端如何兼容UI給的字體移動端的默認字體IOS

Android

Winphone

注意

自定義字體為什么要自定義字體

如何自定義樣式

移動端的默認字體

IOS

默認中文字體是Heiti SC

默認英文字體是Helvetica

默認數字字體是HelveticaNeue

Android

默認中文字體是Droidsansfallback

默認英文和數字字體是Droid Sans

Winphone

默認中文字體是Dengxian(方正等線體)

默認英文和數字字體是Segoe

注意

以上系統均不支持“微軟雅黑”

自定義字體

為什么要自定義字體

上周UI給了一個 “迷你簡粗圓” 字體的套圖, 但是移動端系統中并沒有這個字體，因此即便我們使用 font-family 也沒有辦法讓它顯示出我們所需要的字體樣式。因此，我們需要自定義樣式。

如何自定義樣式

得到該字體 “minijiancuyuan.ttf”

從互聯網上將 “迷你簡粗圓” 字體下載到本地項目中 font 目錄下。

轉換字體格式

www.fontconverter.org

打開該網站，并且上傳 minijiancuyuan.ttf 文件，轉換為 eot/woff/svg 格式，下載回本地，存放于本地項目 font 目錄下

CSS 使用 @font-face 模塊，創建該字體

@font-face {

font-family: 'minijiancuyuan(字體名稱)';

src: url('font/minijiancuyuan.eot'); /* IE9 Compat Modes */

src: url('font/minijiancuyuan.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('font/minijiancuyuan.woff') format('woff'), /* Modern Browsers */

url('font/minijiancuyuan.ttf') format('truetype'), /* Safari, Android, iOS */

url('font/minijiancuyuan.svg#minijiancuyuan') format('svg'); /* Legacy iOS */

}

調用該字體

#demo{

font-family:'minijiancuyuan';

}

這樣我們就可以使用這個字體了。

來源：https://www.cnblogs.com/riven952465/p/5992287.html

總結

以上是生活随笔為你收集整理的自定义字体需要css的,CSS 自定义字体的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。