关于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 ...
随机推荐
- [APUE]进程控制(上)
一.进程标识 进程ID 0是调度进程,常常被称为交换进程(swapper).该进程并不执行任何磁盘上的程序--它是内核的一部分,因此也被称为系统进程.进程ID 1是init进程,在自举(bootstr ...
- Socket聊天程序——客户端
写在前面: 上周末抽点时间把自己写的一个简单Socket聊天程序的初始设计和服务端细化设计记录了一下,周二终于等来毕业前考的软考证书,然后接下来就是在加班的日子度过了,今天正好周五,打算把客户端的详细 ...
- 很多人很想知道怎么扫一扫二维码就能打开网站,就能添加联系人,就能链接wifi,今天说下这些格式,明天做个demo
有些功能部分手机不能使用,网站,通讯录,wifi基本上每个手机都可以使用. 在看之前你可以扫一扫下面几个二维码先看看效果: 1.二维码生成 网址 (URL) 包含网址的 二维码生成 是大家平时最常接触 ...
- [C#][算法] 用菜鸟的思维学习算法 -- 马桶排序、冒泡排序和快速排序
用菜鸟的思维学习算法 -- 马桶排序.冒泡排序和快速排序 [博主]反骨仔 [来源]http://www.cnblogs.com/liqingwen/p/4994261.html 目录 马桶排序(令人 ...
- Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part2:clusterware安装和升级
Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part2:clusterware安装和升级 环境:OEL 5.7 + Oracle 10.2.0.5 RAC 3.安装Clus ...
- JavaScript中事件处理
先看看下面一道题目,请评价以下代码并给出改进意见: if (window.addEventListener) {//标准浏览器 var addListener = function(el, type, ...
- 以向VS 程序打包集成自动写入注册表功能为例,介绍如何实现自由控制安装过程
最近由于项目部署时需要更灵活的控制程序安装的流程以及自定义安装行为,特意研究了一下VS程序打包,把解决办法和大家分享一下. 以VS2010为例: 这是一个已经设置好最基本的Visual Studio ...
- C# 给word文档添加水印
和PDF一样,在word中,水印也分为图片水印和文本水印,给文档添加图片水印可以使文档变得更为美观,更具有吸引力.文本水印则可以保护文档,提醒别人该文档是受版权保护的,不能随意抄袭.前面我分享了如何给 ...
- DOM的小练习,两个表格之间数据的移动
本次讲的是两个表格之间数据的移动,左边的表格移动到右边,并且左边表格移动内容消失. <head> <meta http-equiv="Content-Type" ...
- PMON failed to acquire latch, see PMON dump
前几天,一台Oracle数据库(Oracle Database 10g Release 10.2.0.4.0 - 64bit Production)监控出现"PMON failed to a ...