在设置页面字体的时候,你会发现在 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的更多相关文章

  1. CSS3与页面布局学习总结(五)——Web Font与Sprite

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  2. 把UI图里的小图标制作成icon font

    一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本 ...

  3. [函数] Firemonkey Windows 重新计算 Font Baseline

    计算字型 Baseline 是一个不常用的函数,但如果想要显示不同大小文字下方对齐,就得用它来计算字型的 Baseline 才行,如果计算不准,显示的文字就会高高低低不整齐. 在 Firemonkey ...

  4. Html中<font>标签的使用

    Html中<font>标签的使用 <!doctype html> <html lang="en"> <head> <meta ...

  5. 关于firefox对font awesome本地环境无法加载问题

    问题描述 昨天尝试使用font awesome加载字体图标,直接在本地引入相关文件,测试发现图标在chrome和IE环境支持,但是在firefox上怎么都显示不出来. 解决方法 通过测试发现通过htt ...

  6. CSS3使用Font Awesome字体图标的控件样例(按钮,工具栏,输入框)

    按钮上加入font awesome图标,用原生的input button标签无法实现,查看网上的只能通过<a><li></li></a>实现此功能,通过 ...

  7. CSS 中Font Awesome 图标(附码表)

    HTML中缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. Font Awesome 传送门:http://fontawesome.das ...

  8. Font Squirrel

    Font Squirrel FontSquirrel:国外免费字体下载网是一个提供高质量商业字体下载网站,提供海量的英文字体库,用户可以随意下载并应用于各种商业用字,无需考虑其版权问题. 官网地址:h ...

  9. <web Font的使用>

    使用font-face将字体引入web中 先将字体文件复制到项目的font文件夹中,CSS样式如下: @font-face { font-family: 'iconfont'; /*字体名称*/ sr ...

  10. java 引入自定义字体font后出现的硬盘吃光的问题

    有个需求要用美术字体在图片上写字 用自定义的文字有两个方法: 1. Font dynamicFont = Font.createFont(Font.TRUETYPE_FONT, InputStream ...

随机推荐

  1. NodeJs之OS

    OS Node.js提供了一些基本的底层操作系统的模块OS. API var os = require('os'); console.log('[arch] 操作系统CPU架构'+os.arch()) ...

  2. 多线程的通信和同步(Java并发编程的艺术--笔记)

    1. 线程间的通信机制 线程之间通信机制有两种: 共享内存.消息传递.   2. Java并发 Java的并发采用的是共享内存模型,Java线程之间的通信总是隐式执行,通信的过程对于程序员来说是完全透 ...

  3. npm package.json属性详解

    概述 本文档是自己看官方文档的理解+翻译,内容是package.json配置里边的属性含义.package.json必须是一个严格的json文件,而不仅仅是js里边的一个对象.其中很多属性可以通过np ...

  4. Html.DropDownLis绑定数据库

    效果: 方法一: View: <div class="col-md-md-4"> <div class="input-group"> & ...

  5. Android中Activity处理返回结果的实现方式

    大家在网上购物时都有这样一个体验,在确认订单选择收货人以及地址时,会跳转页面到我们存入网站内的所有收货信息(包含收货地址,收货人)的界面供我们选择,一旦我们点击其中某一条信息,则会自动跳转到订单提交界 ...

  6. 张高兴的 UWP 开发笔记:汉堡菜单进阶

    不同于Windows 8应用,Windows 10引入了"汉堡菜单"这一导航模式.说具体点,就拿官方的天气应用来说,左上角三条横杠的图标外加一个SplitView控件组成的这一导航 ...

  7. ReactiveCocoa代码实践之-UI组件的RAC信号操作

    上一节是自己对网络层的一些重构,本节是自己一些代码小实践做出的一些demo程序,基本涵盖大多数UI控件操作. 一.用UISlider实现调色板 假设我们现在做一个demo,上面有一个View用来展示颜 ...

  8. 设计模式之工厂模式VS抽象工厂

    一.工厂模式主要是为创建对象提供过渡接口,以便将创建对象的具体过程屏蔽隔离起来,达到提高灵活性的目的. 工厂模式在<Java与模式>中分为三类:1)简单工厂模式(Simple Factor ...

  9. Oracle Standard Error 列表

    今天,我特意从网上找了一些,以及自己平时总结的,关于错误编号和说明,平时我们在写项目的时候,往往是可能会出现下面这些错误,例如:违反唯一约束,无效的会话ID,等等.希望对大家有点帮助!可以看看,如果有 ...

  10. 如何编译Zookeeper源码

    1. 安装Ant Ant下载地址:http://ant.apache.org/bindownload.cgi 解压即可. 2. 下载Zookeeper源码包 https://github.com/ap ...