概述
- web 安全系统，移动端设备字体
- css3引入字体到网页
web安全字体
概述
-
ios 系统
默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体 -
android 系统
默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体 -
思源黑体 安卓
font-family: "Source Han Sans CN"
- 总结：
各个手机系统有自己的默认字体，一般不支持我们常用字体，例如微软雅黑等；
如无特殊需求，手机端无需定义中文字体，使用系统默认即可。
英文字体和数字字体可使用 Helvetica都支持。
补充说明
-
移动端 iPhone7 plus 手机的的安全字体默认为Helvetica
iPhone7 plus
- 安卓机 小米手机默认字体为 小米兰亭 不知道对应那种安全字体
Serif 衬线字体:
Georgia, serif
"Palatino Linotype", "Book Antiqua", Palatino, serif
"Times New Roman", Times, serif
Georgia （微软公司的网页核心字体之一，可用性好。可读性比Times New Roman强）
衬线字体
sans - serif 非衬线字体
Arial, Helvetica, sans-serif
Arial Black, Gadget, sans-serif
Impact, Charcoal, sans-serif
"Lucida Sans Unicode", "Lucida Grande", sans-serif
Tahoma, Geneva, sans-serif
"Trebuchet MS", Helvetica, sans-serif
Verdana, Geneva, sans-serif
非衬线字体
Monospace 等宽字体
"Courier New", Courier, monospace
"Lucida Console", Monaco, monospace
等宽字体
css3引入网络字体
概述
- 以英文字体为主，因为26字母+符号，字体大小可控；
- 中文字体绝大部分情况不会使用，主要是中文不能拼接，有什么字体无法预估（但是：网络上有可以按需针对静态页面上，做定制化字体包的）
访问 有字库 --> 登录 --> 搜索字体 --> 调用方法选择css --> 输入一段中文 --> 点击生成 --> 下载css文件 --> 通过样式引入
css字体引入操作
@font-face {
font-family: 'Sansterdam'; /*字体名称*/
src: url('../fonts/Sansterdam.eot') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/Sansterdam.woff') format('woff'),
url('../fonts/Sansterdam.ttf') format('trueType'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../fonts/Sansterdam.svg') format('svg'); /* iOS 4.1- */
font-weight: normal;
font-style: normal;
}
#main .numFont { font-family:'Sansterdam';}
字体下载
https://www.uisdc.com/the-great-chinese-webfont
https://www.youziku.com/
http://cn.justfont.com/
字体格式转换
https://www.fontsquirrel.com/tools/webfont-generator
http://everythingfonts.com/ttf-to-woff2
https://www.fontke.com/tool/convfont/
字体格式对应的兼容:
说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体。
-
TureTpe(.ttf)格式:
.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】; -
OpenType(.otf)格式:
.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】; -
Web Open Font Format(.woff)格式:
.woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】; -
Embedded Open Type(.eot)格式:
.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】; -
SVG(.svg)格式:
.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】
这就意味着在@font-face中我们至少需要.ttf,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。
未完待续....
网友评论