html页面字体调节语言,HTML页面中文字体(font-family)的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";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页面字体调节语言,HTML页面中文字体(font-family)的CSS设置相关推荐
- 修改Typora默认的字体为好看秀美的中文字体“华康手札体“
一 下载并安装"华康手札体W5P"字体 (1)下载方式: 1. 方式一 http://www.downcc.com/font/341067.html 2.百度云链接: 链接:htt ...
- Fira Code字体中增加思源黑体支持中文字体
在Fira Code字体基础上增加思源黑体,合并到一个字体中,解决类似sourceinsight mono模式下无法显示中文的问题 下载链接如下(不需要付费,免费下载的): FiraCode字体中增加 ...
- linux安装中文字体 yum,给CentOS安装中文字体(转)
1.安装fontconfig yum -y install fontconfig 这个命令执行完成之后,就可以在/usr/share文件夹里面看到fonts和fontconfig 使用上面这个命令,安 ...
- 修改Typora默认的字体为好看秀美的中文字体“华康手札体“并配置一些高级定制功能(20210404已成功测试)
本次测试环境 winodws10操作系统 typora软件:0.0.98(相近版本一般都可以进行验证操作) 1.请客官先体验下最终效果图 大家可先瞅一瞅最终修改后的效果图如何,再根据自己需求是否决定要 ...
- linux mac 字体,Mac 和 Windows 的中文字体显示效果
本来这篇和上面的 "把简单的事情做好就是不简单" 是一篇,后来加了更多的对比图片导致文章太长,而且内容不怎么相关,所以分成了两篇. 周末在修改了网站的 CSS.测试浏览器兼容性的时 ...
- html 中加载字体太慢,前端解决中文字体加载慢的问题
CSS3中,使用@font-face即可加载自定义字体了. 推荐的跨浏览器 @font-face CSS 写法: /*声明 WebFont*/ @font-face { font-family: 'f ...
- LVGL学习之路——基于lv_lib_freetype库的TTF字体文件动态加载中文字体(阿里普惠字体)
前言 在学习lvgl中,在英文字体上很多人都用过,但是中文字体往往需要靠取模去实现.那么我就在想,如何像windows那样加载动态的字体呢,这样想做多大字体都行.于是就开始了字体的移植. 什么是t ...
- python中的字体英文名_获取中文字体的英文名字
(方法在分割线后面,前面叙事) 今天用了很久电脑,突然就觉得看着Windows下Chrome的字体觉得很不舒服,跟Mac下的差太远了,于是就开始折腾怎么设置浏览器字体. 先讲一下流程,我的操作方案是: ...
- oracle字体为红色,ORACLE 显示 中文字体
客户端为Oracle 11g 查询中文字体 显示乱码 在32位操作系统下 修改 HKEY_LOCAL_MACHINE\SOFTWARE\Oracle\KEY_OraClient11g_home1 下 ...
最新文章
- 机械转电子工程嵌入式方向靠谱吗?怎么上手学习?
- 「后端小伙伴来学前端了」Vuex进阶操作,让你的代码更加高效(简称如何学会偷懒 【手动狗头】)
- lisp求面与面的差集_AcGeVector3d是点阵的集合,通过等分点的差集得到。 新的点可以通过点与点阵相差得......
- 全境封锁服务器维护 2018,全境封锁全域事件2018年8月活动什么时候开始_全域事件怎么玩...
- 对xml操作的主要方法[轉]
- Vert.x Web
- 电脑死机大全,看完你就是高手了
- 六石编程学:功能要定期测试
- 联想硬盘保护系统密码读取
- 卡诺模型案例分析_需求分析神器 | 卡诺模型
- 【安防百科】HDSDI、960H、HDCVI、HDTVI、AHD方案对比
- java爬取查询四六级成绩_GitHub - Frank17/cet-grade: 英语四六级成绩查询工具
- windows手动清理垃圾文件
- 手撕coreML之yolov2 object detection物体检测(含源代码)
- 计算机视觉领域的一些牛人博客,研究机构等的网站链接 机器学习算法中文视频教程
- 休闲零食生产企业如何做好供应链管理?
- 【论文阅读】深度强化学习的攻防与安全性分析综述
- SDUT实验六7-6 sdut- C语言实验-矩阵转置
- 东北电力计算机考研分数线,东北电力大学2019年考研复试分数线已公布
- CentOS 6 忘记密码,修改密码
热门文章
- 智能优化算法——飞蛾扑火优化算法(完整Matlab实现)
- vue 使用addRoutes()合并动态有权路由
- 数据库与数据仓库有什么区别
- linux snmp 命令oid,linux 自定义SNMP 的 OID信息
- 洛咕 P3645 [APIO2015]雅加达的摩天楼
- xcode ios swift视频压缩使用hevc编码
- 会声会影2023导出视频的清晰度一般选哪个 导出视频怎么保持清晰度
- 离散数学学习笔记——第六讲——二元关系(4.1 序偶和笛卡儿积)
- 【190528】VC++ 纯API自绘图形实现的XP界面库源代码
- css中的inset,inset() | CSS属性参考