CSS 自定义字体

移动端如何兼容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';
    }

这样我们就可以使用这个字体了。