一.使用设备自带字体
- 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中对比
<p>我是正常字体:hellofont</p>
<p class="custom-ff">我是自定义字体:hellofont</p>
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(这个是英文的)
