耐人寻味的CSS属性font-family
时间:2019-10-23
本文章向大家介绍耐人寻味的CSS属性font-family,主要包括耐人寻味的CSS属性font-family使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
font-family
是一个网站用户体验的第一入口,非常有必要花功夫来研究一下。我们首先需要了解衬线字体和无衬线字体,接着了解中英文的常用字体及其适用性。
衬线字体
衬线(serif
)的笔画有粗有细的变化,在每一笔画上都自有风格,笔画末端会有修饰,强调艺术感,适合用于博客,旅游,文化,艺术类网站。
无衬线字体
无衬线(sans-serif
)的字体工整方正,给人正式的感觉,适合政务类,企业类网站使用。
中文字体
Windows
simsun
,宋体,也是windows
下大部分浏览器的默认字体,font-size
较大时清晰度不佳。Microsoft Yahei
,无衬线字体,微软雅黑,是微软委托中国方正设计的一款中文字体。
Mac OS
STHeiti
,华文黑体,OS X 10.6
之前的简体中文系统界面默认字体,也是目前Chrome
游览器下的默认字体。STXihei
,华文细黑,比STHeiti
文字更细。Heiti SC
,黑体-简,从OS X 10.6
开始,黑体-简代替华文黑体用作简体中文系统界面默认字体,显示效果不错,但是喇叭口设计遭人诟病。Hiragino Sans GB
,冬青黑体,清新的专业印刷字体,小字号时足够清晰,拥有很多人的追捧。PingFang SC
,苹方,在Mac OS X EL Capitan
上,苹果为中国用户打造,去掉了为人诟病的喇叭口。
Linux
WenQuanYi Micro Hei
,文泉驿微米黑,Linux
最佳简体中文字体。
英文字体
Windows
Arial
,无衬线西文字体,显示效果一般。Tahoma
,无衬线字体,显示效果比Arial
要好。Verdana
,无衬线字体,优点在于它在小字上仍结构清晰端整、阅读辨识容易。
Mac OS
Times New Roman
,衬线字体,Mac
平台Safari
下默认的字体。Helvetica
、Helvetica Neue
,被广泛使用。San Francisco
,与苹方一样,mac os
最新的西文字体。
font-family设置原则
- 西文优先:西文字体中大多不包含中文,西文优先,中文紧随其后,这样就不会影响到中文字体的选择。
- 从新到旧:优先体验最好的字体,向下兼容。
- 兼容多种操作系统:考虑
windows, mac os, android, linux
等系统。 - 补充字体族:最后根据衬线
serif
或无衬线sans-serif
来补充字体族,当所有设置的字体都找不到时,让操作系统有选择字体的方向。
font-family推荐
font-family: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, "Hiragino Sans GB", "Heiti SC", Arial, "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
扫一扫下方小程序码或搜索Tusi博客
,即刻阅读最新文章!
原文地址:https://www.cnblogs.com/wenbinjiang/p/11726443.html
- 如何实现CDH元数据库MySQL的主主互备
- 在Kerberos环境使用Hue通过Oozie执行Sqoop作业报错异常分析
- 如何在Hue中配置已启用SSL的HttpFS服务
- 如何使用Nginx实现CDSW的跨网段访问
- 7.如何在OpenLDAP中实现将一个用户添加到多个组
- 如何使用java代码通过JDBC访问Sentry环境下的Hive
- 如何为HttpFS服务配置SSL
- 如何使用Java访问集成OpenLDAP并启用Sentry的Impala和Hive
- 如何向Hive表加载数据
- 如何使用Spark Streaming读取HBase的数据并写入到HDFS
- Hive Load本地数据文件异常分析
- 使用Java代码通过JDBC连接只启用Sentry的Impala异常分析
- 如何在CDSW中定制Docker镜像
- 干货:排名前 16 的 Java 工具类!
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 详解Laravel服务容器的绑定与解析
- 修改Laravel自带的认证系统的User类的命名空间的步骤
- PHP使用递归按层级查找数据的方法
- Laravel6.2中用于用户登录的新密码确认流程详解
- PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
- 浅谈PHP array_search 和 in_array 函数效率问题
- 仿抖音短视频APP源码,实现简单的换头像并保存
- php实现JWT(json web token)鉴权实例详解
- laravel实现上传图片,并且制作缩略图,按照日期存放的代码
- 在Laravel中使用MongoDB的方法示例
- 基于thinkphp6.0的success、error实现方法
- Yii框架模拟组件调用注入示例
- 解决laravel 表单提交-POST 异常的问题
- laravel5.0在linux下解决.htaccess无效和去除index.php的问题
- laravel返回统一格式错误码问题