web开发 font 字体相关学习

概述

• 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等字体达到更多种浏览版本的支持。

未完待续....