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

移动端的默认字体

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';
}

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

CSS 自定义字体的更多相关文章

  1. CSS自定义字体的实现,前端实现字体压缩

    CSS中使用自定义字体,首先需要下载你需要的字体ttf或者otf文件 这里推荐一个网站:http://www.zitixiazai.org/ /********css中********/ @font- ...

  2. css自定义字体----使用外部字体文件

    css外部自定义字体 给大家分享一个使用的css小技巧!记得收藏呀!相信大家在浏览各种网站会见到各种奇形怪状花里胡哨的文字,还有就是一些浏览器兼容性问题,不会支持一些特殊的字体!给大家分享一个极其简单 ...

  3. css自定义字体

    @font-face { font-family: 华文隶书; src: url( ../font/STLITI.eot ); /* IE */ src: url( ../font/STLITI.tt ...

  4. CSS自定义字体(@font-face选择符)

    @font-face是CSS中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体. 语法规则: @f ...

  5. css自定义字体完美解决方案example

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. [转] css自定义字体font-face的兼容和使用

    @Font-face目前浏览器的兼容性: Webkit/Safari(3.2+) TrueType/OpenType TT (.ttf) .OpenType PS (.otf): Opera (10+ ...

  7. 【CSS】css自定义字体

    源:http://www.cnblogs.com/lhb25/archive/2011/02/11/1951035.html 1.@font-face 定义一个字体 2.例子

  8. HTML5 Canvas绘文本动画(使用CSS自定义字体)

    一.HTML代码: <!DOCTYPE html> <html> <head> <title>Matrix Text - HTML5 Canvas De ...

  9. font-face自定义字体

    做网站的时候,有时候会遇到某些字体系统里面没有自带.可能更多的时候我们会选择以图替文的方式来做.用图片的话不利于图片的放大缩小,更好的办法是我们可以自定义字体. 当然,在实际运用中我们需要权衡一下自定 ...

随机推荐

  1. django框架的models

    在django的框架设计中采用了mtv模型,即Model,template,viewer Model相对于传统的三层或者mvc框架来说就相当对数据处理层,它主要负责与数据的交互,在使用django框架 ...

  2. error-2016-1-18

    SSL 连接出错 错误: "System.Net.Mail.SmtpException"类型的未经处理的异常在 System.dll 中发生 其他信息: SMTP 服务器要求安全连 ...

  3. linq andregex

  4. test3

    下面写几个示例:这是行内公式: \( e^{\pi i} + 1 = 0\) ,下面的是行间公式: \[ e^{\pi i} + 1 = 0. \] 另一个复杂的公式: $$J_\alpha (x) ...

  5. ORACLE 生成一个随机数

    ORACLE 如何产生一个随机数:DBMS_RANDOM--1.小数( 0 ~ 1) select dbms_random.value from dual ; --2.指定范围内的小数 ( 0 ~ 1 ...

  6. [转载] 深入理解Android之Java虚拟机Dalvik

    本文转载自: http://blog.csdn.net/innost/article/details/50377905 一.背景 这个选题很大,但并不是一开始就有这么高大上的追求.最初之时,只是源于对 ...

  7. Visio 2007中进行数据库建模时如何显示字段类型以及概念名称

    关于在VISIO中进行数据库建模时如何显示字段类型,以及注释的 1 如何显示字段类型:   在visio菜单上--->点击数据库--->选项--->文档    打开后选择表这项,在上 ...

  8. sql 通过表名获取所有列名

    因为要做数据迁移,也就是业务数据库的数据要迁移到历史数据库,这两个数据库理论上表结构是一样的,但因为时间原因,可能业务库升级了表结构,但历史库没有升级,且加字段的顺序不一样,导致 insert int ...

  9. WKwebView与JS交互(h5主动)

    先:WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler // 创建一个webiview的配置项 WKWebViewConfiguratio ...

  10. java虚拟机运行时乱码问题

    问题: Android端通过socket发送文本到windows,windows调用系统剪切板进行粘贴的操作,java服务端在eclipse下直接运行粘贴的文本无乱码,打包jar后粘贴的文本乱码. 解 ...