• 兼容PC手机端字体


    各平台的主流字体支持情况

    各系统的默认字体和常用字体:

    系统 默认西文字体 默认中文字体 其他常用西文字体 其他常用中文字体
    Windows 宋体 宋体 Tahoma、Arial、Verdana、Georgia 微软雅黑、黑体
    Android 4.0以下 Droid Sans Droid Sans Fallback Arial 无宋体、无微软雅黑
    Android 4.0及以上 Roboto Roboto Arial 无宋体、无微软雅黑
    iOS Helvetica Neue Heiti SC (黑体) Tahoma(v7.0)、Arial、Verdana、Georgia STHeiti(v7.0)、无宋体、无微软雅黑
    Mac OS X 10.6以下 Helvetica Neue STHeiti (华文黑体) Tahoma、Arial、Verdana、Georgia 宋体、无微软雅黑
    Mac OS X 10.6及以上 Helvetica Neue Hiragino Sans GB  (冬青黑体简体中文) Tahoma、Arial、Verdana、Georgia 宋体、无微软雅黑

    各移动设备系统支持情况:

    五大类字体 安卓4.0 IOS6.0 WP8
    sans-serif(无衬线) 支持 支持 支持
    serif(衬线) 支持 支持 支持
    monospace(等宽) 支持 支持 支持
    fantasy(梦幻) 不支持 支持 不支持
    cuisive(草体) 不支持 不支持 不支持

    当然目前这只是移动设备各系统的支持情况,然而pc端个浏览器的支持情况也各不相同,如:

    五大类字体 IE系列 Chrome Firefox
    sans-serif(无衬线) 支持 不支持 不支持
    serif(衬线) 支持 支持 支持
    monospace(等宽) 支持 支持 支持
    fantasy(梦幻) 支持 支持 支持
    cuisive(草体) 不支持 不支持 不支持

    上结论

    废话就不做分析了,结合参考资料,给出我目前在用的font-family 代码吧,不一定最好,欢迎赐教。

    下面非全局定义,而是针对特殊div 下的个性化定义:

    1
    2
    3
    4
    5
    6
    7
    8
    
    /*微软雅黑*/
    .yahei{font-family: 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif!important}
    /*宋体*/
    .songti{font-family: "Helvetica Neue", Helvetica,"Songti SC", "SimSun", serif!important}
    /*楷体*/
    .kaiti{font-family: "Helvetica Neue", Helvetica, "KaiTi", "楷体", "STKaiti", "华文楷体", serif!important}
    /*华文仿宋*/
    .fangsong{font-family: "Times New Roman", "Helvetica Neue", Helvetica, "FangSong", "仿宋", "STFangSong", "华文仿宋", serif!important}

    如果是用于全局项目中,那么可能会有所不同,这里直接引用参考资料的代码:

    1
    2
    3
    4
    5
    6
    
    /*移动端项目*/
    font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;
    /*pc端(含Mac)项目*/
    font-family:Tahoma,Arial,”Helvetica Neue“,”Hiragino Sans GB”,Simsun,sans-self;
    /*移动和pc端项目*/
    font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;

    当然,如何排布font-family 根本是看需求是什么,这个仅仅是作为参考。

    参考资料:

    https://ruby-china.org/topics/14005

    http://ued.ctrip.com/blog/?p=3589

    http://typo.sofi.sh/

    http://www.ruanyifeng.com/blog/2014/07/chinese_fonts.html

    http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/

    转载 http://devework.com/font-family-chinese.html

  • 相关阅读:
    java环境配置
    关于Chrome(谷歌浏览器)对docume,准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top
    CSS3圆角详解
    Js监控回车事件
    Sql日期时间格式转换
    JS操作JSON总结
    SQL日期操作及只获取日期的方法
    如何让div出现滚动条
    CodeForces 55D Beautiful numbers
    POJ 3034 Whac-a-Mole
  • 原文地址:https://www.cnblogs.com/wangyingblog/p/5649044.html
Copyright © 2020-2023  润新知