[移动web]字体

一.使用设备自带字体

• ios 系统

默认中文字体是[Heiti SC](http://stackoverflow.com/questions/9918421/what-is-the-default-font-in-chinese-enviroment)
默认英文字体是[Helvetica](http://stackoverflow.com/questions/3838336/iphone-system-font)
默认数字字体是Helvetica Neue
无微软雅黑字体

• android 系统

默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体

• winphone 系统

默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
无微软雅黑字体

总结:

各个手机系统有自己的默认字体，且都不支持微软雅黑
如无特殊需求，手机端无需定义中文字体，使用系统默认
英文字体和数字字体可使用 Helvetica ，三种系统都支持
/* 移动端定义字体的代码 */
body{font-family:Helvetica;}

问题:但是,如果微信活动界面为了美观必须要规定的某种字体怎么办?

二.移动端自定义字体@font-face

• 语法规则

@font-face {
            font-family: "自定义字体名称";
            src: url("saturday_nights/SaturdayNightsPersonalUse.ttf") format('truetype'); /* Safari, Android, iOS */
        }

• 两要素:

  • 1.font-family: 字体名字
  • 2.src: url字体资源文件+format格式

• 实际效果

1.在style中
/* 类选择器中使用自定义字体 */
        .custom-ff{
            font-family: "自定义字体名称";
        }
2.在body中对比
我是正常字体:hellofont
我是自定义字体:hellofont

Snip20170912_3.png

三. 若要在PC端使用web字体,则要考虑浏览器适配

        @font-face {
            font-family: 'YourWebFontName';
            src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
            src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
            url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
            url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
        }

生成多种字体文件的网址

Snip20170912_1.png

Snip20170912_2.png

三.外链字库推荐网站

1.有字库
2.阿里巴巴矢量图标库
3.字蛛（FontSpider)
4.https://www.google.com/fonts(这个是英文的)

参考文献:

移动web页面使用字体的思考
CSS3 @font-face
有支持中文的 Web Font 吗？