通用字体系列

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. List<T>与Dictionary<string,T>频繁检索的性能差距

    一直对LINQ简洁高效的语法青睐有加,对于经常和资料库,SQL语法打交道的C#开发者来说,LINQ无疑是一个非常不错的选择,当要在List<T>(T为一个普通对象)集合中查找满足某些条件的 ...

  2. Android开发自学笔记(Android Studio1.3.1)—3.Android应用结构解析

    一.R文件是什么?      如上图所示,我们可以通过findViewById方法通过传入R.id.show找到我们的TextView元素,findViewById方法也很好理解,从View中通过Id ...

  3. 遇到技嘉 Gigabyte UEFI DualBIOS问题

    我的板子是技嘉H87-D3H二手板子,用了差不多三年左右,一直感觉不错,承担着高强度的开发任务. 问题描述: 无法开机,按下电源后,主板通电状态灯亮,CPU和显卡风扇转动,显示器显示下图: 2至3秒后 ...

  4. webpack入坑之旅(一)不是开始的开始

    最近学习框架,选择了vue,然后接触到了vue中的单文件组件,官方推荐使用 Webpack + vue-loader构建这些单文件 Vue 组件,于是就开始了webpack的入坑之旅.因为原来没有用过 ...

  5. The hierarchy of the type NsRedisConnectionFactory is inconsistent

    The hierarchy of the type is inconsistent 解释为:层次结构的类型不一致 由于我在eclipse里建了两个JAVA PROJECT项目,分别是A projiec ...

  6. 6.7-3将数组arr中索引值为2的元素替换为“bb”

    package shuzu; import java.util.Arrays; public class TH { public static void main(String[] args) { / ...

  7. swift 学习(一)基础知识 (基本数据类型,操作符,流控制,集合)

    xcode 中调用API帮助 1.查看简单信息,选中后 按键 control +左键单击  或者按 右侧属性栏 里的帮助按钮 2.完整API,选中后 按键 control +左键双击 3.查看类.函数 ...

  8. mysql命令-use

    use命令可以让我们来使用数据库. use命令格式: use <数据库名>; 例如,如果xhkdb数据库存在,尝试存取它: mysql> use xhkdb; 屏幕提示:Databa ...

  9. asp.net mvc 依赖缓存启动项配置

    msdn 参考地址:https://msdn.microsoft.com/zh-cn/library/ms229862 4.5 第一步:32bit%windir%\Microsoft.NET\Fram ...

  10. APIO2015简要题解

    这场比赛当初是67(?)反正就是Cu滚粗了…… 先给个题目的传送门:http://wenku.baidu.com/link?url=mUxdsYomenU-e9SFVPacVtXysemiQA4KnP ...