CSS 自定义字体
移动端如何兼容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';
}
这样我们就可以使用这个字体了。
前端技术群:263240563
posted on 2016-10-24 11:28 Riven952465 阅读(387) 评论(0) 编辑 收藏 举报