zoukankan      html  css  js  c++  java
  • 兼容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

  • 相关阅读:
    Ext5实现树形下拉框ComboBoxTree
    SQL常用语句整理
    第九篇——鼓掌,学籍管理系统的相关两篇报告终于写完啦!
    第八篇——源程序版本管理软件及项目管理软件
    第七篇——Mobile Apps,软件的曙光。
    第六篇——初尝Python,意犹未尽
    第五篇——C++实现四则运算
    第四篇——是什么让我们勇往直前? 兴趣使然
    第三篇——软件之殇,WE ARE THOUSANDS APART!
    第二篇——The communication during software engineering.
  • 原文地址:https://www.cnblogs.com/wangyingblog/p/5649044.html
Copyright © 2011-2022 走看看