web,pc端及手机端支持的字体

时间:2024-03-15 08:46:29

web,pc端及手机端支持的字体

web,pc端及手机端支持的字体

web,pc端及手机端支持的字体

web,pc端及手机端支持的字体

页面地址为:《点击此处》

以上为引致张鑫旭的网站内容,仅为了以后方便查看,如有不当,请指出谅解!

手机端字体选择:

手机端支持的字体比较少,对于要求的字体一般如何定义?

相信大家会想到 @font-face 定义为微软雅黑字体并存放到 WEB 服务器上,在需要使用时被自动下载

web,pc端及手机端支持的字体

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

web,pc端及手机端支持的字体

雅黑字体问题虽然解决了,但也带来了影响,一来消耗用户的流量,二来对页面的打开速度造成了延迟。

 

三大手机系统的字体

ios 系统

  • 默认中文字体是Heiti SC
  • 默认英文字体是Helvetica
  • 默认数字字体是HelveticaNeue
  • 无微软雅黑字体

android 系统

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

winphone 系统

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

结果就是:

  • 各个手机系统有自己的默认字体,且都不支持微软雅黑
  • 如无特殊需求,手机端无需定义中文字体,使用系统默认
  • 英文字体和数字字体可使用 Helvetica ,三种系统都支持