文档章节

css文本字体的选择(font-family)

校友君
 校友君
发布于 2014/06/20 23:19
字数 783
阅读 22
收藏 0
点赞 0
评论 0

首先来个例子:font-family: Arial, Helvetica, sans-serif;

本例中,web浏览器会先看看是否安装了 Arial 字体。如果安装了,那么就用这种字体;如果没有安装,浏览器就会继续寻找 Helvetica 字体;如果还是没有找到,最后它就会指定一种通用的字体——sans-serif。当你指定一种通用的字体样式(如 sans-serif 或 serif)时,访问者的浏览器就会选择那种字体。但你至少可以预知它的基本特征。

如果字体的名称中包含多个单词,则必须用双引号("")将它们括起来,如:

    font-family: "Times New Roman", Times, serif;

以下是一些常用的字体类型组合,每一列的最后都包含一种通用的字体。

Serif 字体

Serif 字体 最适用于冗长的文字信息,因为大家都觉得这种字体使字母主笔划的结尾处会有一些细小的“足”,能够比较有效地引导人们的视线从一个字母移到下一个字母,阅读起来感觉更加轻松。serif 字体包括:Times、Times New Roman、Georgia;

"Times New Roman", Times,serif

Georgia, "Times New Roman", Times, serif

Baskerville, "Palatino Linotype", Times, serif

"Hoefler Text", Garamond, Times, serif

大家可以自行测试下,很简单的。另,字体在windows系统和Mac系统上显示时并不会一模一样。这两个系统带有不同的内建字体。此外消除锯齿的功能(使屏幕上的文字看起来更加光滑)在Mac系统上的效果比在Windows上更好一些。如果你用的是win系统,又希望在自己机上显示出来的字体更好看一些,可以启用Microsoft的ClearType 技术,详情见:www.microsoft.com/typography/cleartype

Sans-serif 字体

Sans-serif 字体 看起来干净而简洁,所以经常被用在标题上。Sans-serif 字体包括: Arial、Helvetica、Verdana、和 Formata;

Arial, Helvetica, sans-serif

Verdana, Arial, Helvetica,sans-serif

Geneva, Arial, Helvetica, sans-serif

Tahoma, "Lucida Grande", Arial, sans-serif

"Trebuchet MS", Arial, Helvetica, sans-serif

"Century Gothic", "Gill Sans", Arial, sans-serif

Monospaced 字体

Monospaced (等宽)字体 经常用于显示计算机代码。Monospaced字体中的每个字母都是等宽的(打字机一般是用这种字体将数据成整齐的列)。

"Courier New", Courier, monospace

"Lucida Console", Monaco, monospace

"Copperplate Light", "Coppenrplate Gothic Light", serif

"Marker Felt", "Comic Sans MS", fantasy

其他字体

从理论上讲,字体种类有成千上万种,并且每一种操作系统自带的字体还不在此列。但是下面这些字体在Mac和PC上都十分常用,因此需要特别留意:

Arial Black

Arial Narrow

Impact

要特别注意 Arial Black 和 Impact 字体,它们只有一种形式,没有斜体。因此,在使用这些字体时,一定要将 font-weight 和 fonr-style 设置为 normal。否则,如果将文本设置为粗体或斜体,浏览器就会绞尽脑汁去猜测这些文字应该是什么样子。

另:www.codestyle.org/css/font-family 网站上可以找到更多关于哪些操作系统上装有哪些字体的信息,包括 Mac、Windows 和 Linux 系统。

© 著作权归作者所有

共有 人打赏支持
校友君
粉丝 3
博文 5
码字总数 5151
作品 0
广州
字体和文本

字体 网页中的字体有三个来源。 1、用户机器中安装的字体。(直到最近,这些字体还是能在网页中放心使用的唯一一批字体。) 2、保存在第三方网站上的字体。最常见的是 Typekit 和 Google,可...

风吹一米阳光
2015/09/29
21
0
Java程序员从笨鸟到菜鸟之(十六)CSS基础积累总结(上)

一:CSS的工作原理 1.基本的CSS语法 比方说,我们要用红色作为网页的背景色: 用HTML的话,我们可以这样: 用CSS的话,我们可以这样获得同样的效果: body {background-color: #FF0000;} 上例...

长平狐
2012/11/12
57
0
CSS 文本样式[上]

字体总汇 字体设置 Web字体 通过文本样式的设置,更改字体的大小、样式以及文本的方位。 一、字体总汇 CSS文本样式表如下: 二、字体设置 我们可以通过CSS文本样式来修改字体的大小、样式以及...

xiaoxiaobukuang
2017/10/26
0
0
《Head first HTML与CSS 第二版》读书笔记 第七章 CSS入门

CSS由规则组成,每个规则为选择的HTML元素提供样式。 典型的规则包括一个选择器以及一个或多个属性和值。 选择器指定 规则将应用到哪些元素。 每个属性声明以一个分号结束。 规则中所有属性和...

一万
2016/07/31
36
0
[译] Font-size:一个意外复杂的 CSS 属性

原文地址:Font-size: An Unexpectedly Complex CSS Property 原文作者:Manish Goregaokar 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:zephyrJS 校对者:bambo...

font size is 16px
06/02
0
0
ubuntu14下atom中文乱码方块

http://blog.leanote.com/post/rexlevin/ubuntu14%E4%B8%8Batom%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81%E6%96%B9%E5%9D%97 atom版本是1.0.11。 先装字体: ctrl+shift+p打开命令面板,搜索,选......

樂天
2015/09/14
64
0
高效整洁CSS代码原则 (上)

CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非全局...

CavinTang
2011/01/06
0
0
CSS中可以和不可以继承的属性

一、无继承性的属性 1、display:规定元素应该生成的框的类型 2、文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shadow:文本阴影效果 white-space:...

宋春敏
2017/11/05
0
0
python+django 用的tinymce 编辑器.为什么默认字体总是这么小?

python+django 用的tinymce 编辑器.为什么默认字体总是这么小? 我根据网上的说明: 修改文本框里字体的大小: 解决方案:jsthemesadvancedcsseditor_content.css中的 修改为 body, td, pre { ...

gq2018
2015/02/28
704
1
Web前端基础【2】--CSS基础

CSS指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题:即使同一个HTML文档也能表现出外观的多样性。作一个形象的比喻:对于一个...

爱吃西瓜的番茄酱
2017/11/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周六乱弹 —— 妹子和游戏哪个更好玩

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @andonny :分享唐朝乐队的单曲《国际歌》 《国际歌》- 唐朝乐队 手机党少年们想听歌,请使劲儿戳(这里) @举个栗子- :日常祈雨 邪恶的大祭...

小小编辑
26分钟前
61
4
流利阅读笔记32-20180721待学习

“人工智能”造假:只有人工,没有智能 Lala 2018-07-21 1.今日导读 当今社会,擅长单个方面的人工智能已经盛行,手机借助 AI 智慧防抖技术帮助大家拍出清晰照片,谷歌研发的 AI 助手将可以帮...

aibinxiao
今天
2
0
我的成长记录(一)

今天突然精神抖擞,在我的博客下新开一项分类>成长记录,专门记录每隔一段时间我的一点感悟吧。因为今天才专门花时间新开这样一个分类,所以以前有过的一些感悟没有记录下来,现在已经想不起...

dtqq
今天
0
0
机器学习管理平台 MLFlow

最近工作很忙,博客一直都没有更新。抽时间给大家介绍一下Databrick开源的机器学习管理平台-MLFlow。 谈起Databrick,相信即使是不熟悉机器学习和大数据的工程湿们也都有所了解,它由Spark的...

naughty
今天
0
0
idea tomcat 远程调试

tomcat 配置 编辑文件${tomcat_home}/bin/catalina.sh,在文件开头添加如下代码。    CATALINA_OPTS="-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=7829" Idea端配......

qwfys
今天
1
0
遍历目录下的文件每250M打包一个文件

#!/usr/bin/env python # -*- utf-8 -*- # @Time : 2018/7/20 0020 下午 10:16 # @Author : 陈元 # @Email : abcmeabc@163.com # @file : tarFile.py import os import tarfile import thr......

寻爱的小草
今天
1
0
expect同步文件&expect指定host和要同步的文件&构建文件分发系统&批量远程执行命令

20.31 expect脚本同步文件 expect通过与rsync结合,可以在一台机器上把文件自动同步到多台机器上 编写脚本 [root@linux-5 ~]# cd /usr/local/sbin[root@linux-5 sbin]# vim 4.expect#!/...

影夜Linux
今天
1
0
SpringBoot | 第九章:Mybatis-plus的集成和使用

前言 本章节开始介绍数据访问方面的相关知识点。对于后端开发者而言,和数据库打交道是每天都在进行的,所以一个好用的ORM框架是很有必要的。目前,绝大部分公司都选择MyBatis框架作为底层数...

oKong
今天
13
0
win10 上安装解压版mysql

1.效果 2. 下载MySQL 压缩版 下载地址: https://downloads.mysql.com/archives/community/ 3. 配置 3.1 将下载的文件解压到合适的位置 我最终将myql文件 放在:D:\develop\mysql 最终放的位...

Lucky_Me
今天
2
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

问题终结者
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部