CSS 自定义字体

移动端如何兼容UI给的字体

[toc]

移动端的默认字体

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';
    }
    这样我们就可以使用这个字体了。

发布者

iamorz

前端技术群:263240563

发表评论

电子邮件地址不会被公开。 必填项已用*标注