关于font-family
在设置页面字体的时候,你会发现在 font-family
属性中会设置好多个字体,想看懂它们都是什么字体吗?不好意思,我不是搞设计的,我也不知道。那么,现在写的东西,只是对于一个前端人员来说,要了解的 font-family
属性而已。以下的内容,仅仅是本人的一点粗浅理解,希望对于新手有点概念上的帮助。
字体家族
首先,大家有没有这么个疑问?为什么我们选择字体的时候要用 font-family
而不是其他的名词呢?
其实这个单词也就说明了原因所在了。那就是,字体是以家族分类的。
字体总共分为五大类,如下:
- serif :矢量字体,线条有粗细,可等比例缩放。
- sans-serif :这应该是我们用的最多的字体家族了,它和
serif
的区别就是,H 和 I 上下没有小横线。 - monospace :等宽字体。
- cursive :手写字体。
- fantasy :其他各种无法归类的字体,比较个性的字体了都属于这一类了。
字体选择
在设置 font-family
时,字体的选择是有先后顺序和优先级的。
一般的话,在写一个项目的时候,都会备用好几个字体。选择用什么字体,它在视觉上呈现的效果如何,这里我们不去细说,因为我也不懂啊,O(∩_∩)O哈哈~(总有种要被打的错觉)。
进入正题,一般设计给出我们几种字体后,对于前端的工作,其实很简单了,就是排序。。。页面设计用的主要字体放在第一位,之后的第二或第三位写上备用字体。因为不是所有用户的电脑上都会有我们的首选字体;
其中英文字体写前边,中文字体写后边,不用担心页面中出现了中文字体后会使用前边的英文字体,它会乖乖地用我们要求的中文字体的,嗯(因为中文无法用英文字体识别显示出来的呀)。
最后的最后,就是我们强大的字体家族了,在最后一定请加上 sans-serif
(或别的那几种家族中的一种),这是最后一个保险,我们设置的所有字体在用户的电脑上都没有的时候,就让它们用用户电脑上的默认 sans-serif
字体显示出来,不至于出来乱七八糟的样子啊。
结束语
以上简单的东西,除了对于 font-family
的一个简单介绍外,还有一点想表达的是 我们要对自己的产品有足够的把控,尽量不要让它超出我们的控制范围之内。备用方案永远是需要的。
大致了解五大家族后,我们在字体的选择时,应该会更好的认识了,所以请不要在认为 sans-serif
是一个类似 微软雅黑
的字体了哦。
关于font-family的更多相关文章
- CSS3与页面布局学习总结(五)——Web Font与Sprite
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- 把UI图里的小图标制作成icon font
一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本 ...
- [函数] Firemonkey Windows 重新计算 Font Baseline
计算字型 Baseline 是一个不常用的函数,但如果想要显示不同大小文字下方对齐,就得用它来计算字型的 Baseline 才行,如果计算不准,显示的文字就会高高低低不整齐. 在 Firemonkey ...
- Html中<font>标签的使用
Html中<font>标签的使用 <!doctype html> <html lang="en"> <head> <meta ...
- 关于firefox对font awesome本地环境无法加载问题
问题描述 昨天尝试使用font awesome加载字体图标,直接在本地引入相关文件,测试发现图标在chrome和IE环境支持,但是在firefox上怎么都显示不出来. 解决方法 通过测试发现通过htt ...
- CSS3使用Font Awesome字体图标的控件样例(按钮,工具栏,输入框)
按钮上加入font awesome图标,用原生的input button标签无法实现,查看网上的只能通过<a><li></li></a>实现此功能,通过 ...
- CSS 中Font Awesome 图标(附码表)
HTML中缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. Font Awesome 传送门:http://fontawesome.das ...
- Font Squirrel
Font Squirrel FontSquirrel:国外免费字体下载网是一个提供高质量商业字体下载网站,提供海量的英文字体库,用户可以随意下载并应用于各种商业用字,无需考虑其版权问题. 官网地址:h ...
- <web Font的使用>
使用font-face将字体引入web中 先将字体文件复制到项目的font文件夹中,CSS样式如下: @font-face { font-family: 'iconfont'; /*字体名称*/ sr ...
- java 引入自定义字体font后出现的硬盘吃光的问题
有个需求要用美术字体在图片上写字 用自定义的文字有两个方法: 1. Font dynamicFont = Font.createFont(Font.TRUETYPE_FONT, InputStream ...
随机推荐
- 前端网络、JavaScript优化以及开发小技巧
一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...
- .NET基础拾遗(5)多线程开发基础
Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理基础 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开 ...
- eclipse 快捷键大全
注:因eclipse版本.电脑配置等原因 有些快捷键可能导致不可用(遇到些许问题可在下方评论) [Ct rl+T] 搜索当前接口的实现类 1. [ALT +/] 此快捷键为用户编辑的好帮手,能为 ...
- myeclipse学习总结一(在MyEclipse中设置生成jsp页面时默认编码为utf-8编码)
1.每次我们在MyEclispe中创建Jsp页面,生成的Jsp页面的默认编码是"ISO-8859-1".在这种情况下,当我们在页面中编写的内容存在中文的时候,就无法进行保存.如下图 ...
- Python应用03 使用PyQT制作视频播放器
作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁任何形式转载. 最近研究了Python的两个GUI包,Tkinter和PyQT.这两个GUI包的底层分别是Tcl/ ...
- 使用python自动生成docker nginx反向代理配置
由于在测试环境上用docker部署了多个应用,而且他们的端口有的相同,有的又不相同,数量也比较多,在使用jenkins发版本的时候,不好配置,于是想要写一个脚本,能在docker 容器创建.停止的时候 ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- 【从零开始学BPM,Day3】自定义表单开发
[课程主题] 主题:5天,一起从零开始学习BPM [课程形式] 1.为期5天的短任务学习 2.每天观看一个视频,视频学习时间自由安排. [第三天课程] 1.课程概要 Step 1 软件下载:H3 BP ...
- nexus 社区版3.0.2部署、访问
下载nexus社区办(oss): https://www.sonatype.com/download-oss-sonatype 目前最新版本 nexus-3.0.2-02-win64.zip nex ...
- SymmetricDS 快速和灵活的数据库复制
开始谈谈开源的SymmetricDS,谈谈实际使用中,遇到的一些问题和解决办法.持续更新: SymmetricDS 快速和灵活的数据库复制 实际使用 和 埋过的坑 (一)知识篇 SymmetricDS ...