温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

HTML页面中文字体的CSS怎么设置

发布时间:2022-01-19 15:44:17 来源:亿速云 阅读:205 作者:iii 栏目:开发技术

这篇文章主要讲解了“HTML页面中文字体的CSS怎么设置”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“HTML页面中文字体的CSS怎么设置”吧!

英文字体较为简单统一,容易设置。而且英文字母少,即使重新定义一个字体体积也不大。中文则完全依赖操作系统的字体,不同操作系统的拥有的字体各不相同,设置起来稍显复杂。设置不当的话,会导致某些操作系统下显示效果不佳。

Windows

中文字体:微软雅黑("Microsoft Yahei") 宋体(SimSun)。微软雅黑("Microsoft Yahei")为最佳选择。

英文字体:"Segoe UI"

经典组合:微软雅黑("Microsoft Yahei") "Segoe UI"

另:宋体使用"\5b8b\4f53"兼容性较好。因为 Firefox 的某些版本和 Opera 不支持 SimSun 的写法。

Mac OS

中文字体:

  • OS X 10.6 之前:华文黑体(STHeiti) 华文细黑(STXihei)

  • OS X 10.6 之后:黑体-简(Heiti SC)

  • 冬青黑体( Hiragino Sans GB )

  • 苹方(PingFang SC):全新中文字体

英文字体:

  • Helvetica Helvetica Neue

  • San Francisco:全新英文字体

经典组合:苹方(PingFang SC) San Francisco

Android

中文字体:Droid Sans Fallback为默认的中文字体,所以无需为Android专门设置中文字体。

iOS

与 Mac OS 一致。

Linux

中文字体:文泉驿微米黑"WenQuanYi Micro Hei"

中文字体设置

Mac电脑也可能装word,从而拥有微软雅黑字体,所以应该以Mac自身的字体优先。顺序是Mac、Windows、Linux。大致是哪种字体好看就先定义那种字体。

font-family: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";

英文字体

参考Bootstrap4的设置:

font-family:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  // 如果前面定义的字体都找不到,则使用系统中的默认的非衬线字体。因为非衬线字体通常比衬线字体好看。
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

参考modern-normalize:

font-family:
    system-ui,
    -apple-system, /* Firefox supports this but not yet `system-ui` */
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji';

参考tailwindcss:

font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";

中英文字体

字体定义的规则是,前面的字体找不到,则由后面的字体代替。由于中文字体中也带有英文字体,且通常比较难看,所以应该先定义英文字体。中英文字体一起的设置如下:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Helvetica Neue", Helvetica, Tahoma, Arial,"PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

感谢各位的阅读,以上就是“HTML页面中文字体的CSS怎么设置”的内容了,经过本文的学习后,相信大家对HTML页面中文字体的CSS怎么设置这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI