通用字体系列

CSS中定义了5种通用字体系列

举例说明:指定通用字体系列

        body {
font-family:sans-serif;/*如果你希望文档使用一种sans-serif字体而并不关心是哪一种具体字体,这样用户代理会从ans-serif字体系列中选择一个字体将其应用到body元素上*/
}
        h1 {
font-family: Georgia,serif; /*如果Georgia字体不可用,则使用另外一种serif字体*/
} h2 {
font-family: Times,'Times New Roman',Georgia,serif;/*按先后顺序来、最后指定一个通用字体名以保险起见*/
/*只有当一个字名中有一个或多个空格或者如果字体名包括#或$之类的符号,才需要在font-family声明中加引号*/
}

font-weight字体加粗中是如何起作用的?

字体指定了9级加粗度,即100~900,其中400定义为等价于normal,700对应于bold,其它数不对应font-weight的任何其它值,不过它们可能对应于常用变形名。规则如下

举例说明一下:

字体的风格和变形

font-style的值可以为:italic、oblique、normal、inherit

normal:非斜体和倾斜的字体

oblique:正常竖直文本的一个倾斜版本

italic:斜体是一种单独的字体风格,对每个字母的结构有一些小改动,来反映变化的外观

css字体相关的零碎点点

        p {
font-variant:small-caps;/*小型大写字母*/
font-stretch:wider;/*这个属性用于让一个字体的字符更胖或更瘦*/
font-size-adjust:0.58;/*让字体保证可以辨识*/
}

font属性

font的前三个值font-style、font-weight和font-variant,后两个值为font-size和font-family,其中前三个值允许采用任意的顺序或者说可以任意省略,后两个值则必须font-size在前,font-family在后作为声明中的最后两个值,而且font声明中必须要有这两个值。

另外值得一提的是在font属性中可以增加行高,如下所示

再来看一个例子:

上述的css事实上跟下面的css是等价的

因为被忽略的值都会重置为其默认值 ,因为也将导致其覆盖inherit属性,所以使用font缩写属性时还是应该小心一些才好。

使用系统字体

        div {
font: caption;/*标题的控件*/
font: icon;/*图标加标签*/
font: menu;/*菜单*/
font: message-box;/*对话框*/
font: small-caps;/*小控件加标签*/
font: status-bar;/*窗口状态条*/
}

CSS--字体的更多相关文章

  1. CSS字体属性大全

    文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...

  2. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  3. Css字体中英文对照表

    css字体中文.英文.Unicode名对照表 另外注意:繁体中文字体名,在简体中文系统中是不能被识别的. 中文名 英文名 Unicode Unicode 2 Mac OS 华文细黑 STHeiti L ...

  4. css字体设置

    css字体设置 .selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,S ...

  5. 2.css字体单位

    这期简单说说css字体单位 字体单位有三种:px.em.rem 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px. % 百分比 in 英寸 cm 厘米 mm 毫米 e ...

  6. Css - 字体图标

    Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页 ...

  7. CSS 字体(font)实例

    CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...

  8. css字体中英文对照表(转)

     在css文件中,我们常看到有些字体名称变成了乱码,这是由于网页开发者将中文字体的名字直接写成了中文,而css文件本身没有声明字符编码方式,查看时就出现了乱码.为了避免这种乱码状况出现,可以将css文 ...

  9. css 字体样式设置

    css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人   css字体样式(Font Style) ...

  10. css字体图标的制作和使用。

    css字体图标的制作和使用. 在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图 ...

随机推荐

  1. Loom工具类:Unity3D巧妙处理多线程

    Loom代码不多,只有168行, 然而却具备了子线程运行Action, 子线程与主线程交互的能力! public static Thread RunAsync(Action a) public sta ...

  2. hdu-1823 Luck and Love

    题目链接:hdu1823二维线段树单点更新区间查询 题意 向一个100*1000的二维空间中插入点,每次查询时,查询区间最大值. 题解 身高既然是100~200,那就相当于100;活泼度相当于1000 ...

  3. python学习笔记整理——集合 set

    python学习整理笔记--集合 set 集合的用途:成员测试和消除重复的条目,进行集合运算 注意:花括号或set()函数可以用于创建集合. 注意:若要创建一个空的集合你必须使用set(),不能用{} ...

  4. c++中STL库简介及使用说明

    作为C++标准不可缺少的一部分,STL应该是渗透在C++程序的角角落落里的.STL不是实验室里的宠儿,也不是程序员桌上的摆设,她的激动人心并非昙花一现.本教程旨在传播和普及STL的基础知识,若能借此机 ...

  5. myeclipse 连接svn服务器验证位置时发生错误 404 forbidden

    来源于:https://my.oschina.net/softwarechina/blog/220300 网上有文章说是C:\Users\thinkpad\AppData\Roaming\Subver ...

  6. ubuntu下启动、关闭tomcat,查看tomcat运行日志

    启动:一般是执行sh tomcat/bin/startup.sh 停止:一般是执行sh tomcat/bin/shutdown.sh查看:执行ps -ef |grep tomcat 输出如下 *** ...

  7. DOCTYPE是什么鬼?文档模式又是什么鬼?

    !DOCTYPE !DOCTYPE是什么: 在所有 HTML 文档中规定 DOCTYPE 是非常重要的,这样浏览器就能了解预期的文档类型, 告诉浏览器要通过哪一种规范(文档类型定义 DTD)解析文档( ...

  8. git将本地代码 和服务器git@osc 上的代码 关联

    将本地代码 和服务器git@osc 上的代码 关联 要使用git 首先,你得安装一个git 下载 http://git-scm.com/downloads 安装完成后,需要简单的配置一下,打开 Git ...

  9. 动画: ThemeAnimation(主题动画)

    背水一战 Windows 10 之 动画 PopInThemeAnimation - 控件出现时的动画 PopOutThemeAnimation - 控件消失时的动画 FadeInThemeAnima ...

  10. 控件(文本类): TextBox, PasswordBox

    介绍背水一战 Windows 10 之 控件(文本类) TextBox PasswordBox 示例1.TextBox 的示例 1Controls/TextControl/TextBoxDemo1.x ...