font是用来设置网页字体属性的关键字，使用频率非常高，大家也比较熟悉。它有两种写法，一种是简写，一种分开写。

简写--font:italic bold 12px/20px arial,sans-serif;

分写--font-style:nomal;font-variant:small-caps;font-weight:bold;font-size:12px;line-height:20px;font-family:"Times New Roman",arial,sans-serif;

第一行简写中12px/20px 指的是 字体大小为12px,行高为20px（相邻行间距中线间的距离）。最后两个是两种字体，如果系统不认识第一个字体，会显示后边的字体，多字体的话依次类推（为了兼容不同的浏览器，通常第一个放浏览器都认识的字体）。

font-style还有两个可选值italic oblique，看w3c 上的定义，都为”浏览器会显示一个斜体的字体样式”。貌似没有区别。其实在这些字体中有的字体本身就没有斜体，那么使用italic后也正常显示，但是使用了oblique后字体倾斜。

font-variant:small-caps的作用是将所有的字体设置为小型大写字母字体，另外还有两个可选值nomal,inherit。

CSS知识点：font小细节的更多相关文章

  1. 关于css的一些小细节---link

    <link rel="stylesheet" href=“a.css” type="text/css"> rel:当前文档与被链接文档间的关系,必须 ...

  2. css小细节罗列

    有空时候把一些常见可能不是每个人都知道的css小细节总结了下,共勉. 1.line-height 众多周知,line-height是行高的意思,我们时常会使用类似line-height:24px;这样 ...

  3. 这些HTML、CSS知识点，面试和平时开发都需要 No5-No7

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  4. 这些HTML、CSS知识点，面试和平时开发都需要 No5-No7（知识点：文字设置、设置背景、数据列表）

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  5. 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  6. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  7. css知识点

    css知识点 一.盒模型知识 border: 边框 border-width:边框的宽度 border-color:边框的颜色 border-style:边框的线型 border-top:上边框 bo ...

  8. 你所不知道的 CSS 滤镜技巧与细节

    承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...

  9. 你所不知道的 CSS 阴影技巧与细节

    关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...

随机推荐

  1. NSIS：使用WinVer.nsh头文件判断操作系统版本

    原文 NSIS:使用WinVer.nsh头文件判断操作系统版本 AtLeastWin<version> 检测是否高于指定版本 IsWin<version> 检测指定版本(唯一限 ...

  2. windows（64位）下用vagrant+virtualbox 管理虚拟机具体解释

    windows下安装(64位) vagrant 跟 vituriebox http://blog.smdcn.net/article/1308.html Host: 127.0.0.1 Port: 2 ...

  3. Linux 编程学习笔记----动笔makefile档

    Befroe Beginning. 在设置暑假的plan ,关于Linux的书籍如今在看的是ALP和Linux高级程序设计(杨宗德)第三版.在计划中的是Linux高级环境编程. 如今開始关于Linux ...

  4. 从源码看Android中sqlite是怎么读DB的（转）

    执行query 执行SQLiteDatabase类中query系列函数时,只会构造查询信息,不会执行查询. (query的源码追踪路径) 执行move(里面的fillwindow是真正打开文件句柄并分 ...

  5. UI測试内容

    我们在实际工作其中,针对web应用程序,也就是常常所说的B/S系统,能够从例如以下方面来进行用户界面測试: 导航測试 导航描写叙述了用户在一个页面内操作的方式,在不同的用户接口控制之间,比如butto ...

  6. Caused by: java.lang.ClassNotFoundException: org.apache.commons.logging.LogFactory

    1.错误叙述性说明 2014-7-12 0:38:57 org.apache.catalina.core.ApplicationContext log 信息: No Spring WebApplica ...

  7. POJ 2081 Recaman&#39;s Sequence（水的问题）

    [简要题意]:这个主题是很短的叙述性说明.挺easy. 不重复. [分析]:只需要加一个判断这个数是否可以是一个数组,这个数组的范围. // 3388K 0Ms #include<iostrea ...

  8. ACM之跳骚---ShinePans

    Description Z城市居住着非常多仅仅跳蚤.在Z城市周六生活频道有一个娱乐节目.一仅仅跳蚤将被请上一个高空钢丝的正中央.钢丝非常长,能够看作是无限长.节目主持人会给该跳蚤发一张卡片.卡片上写有 ...

  9. jQuery 的 serializeArray()、serialize() 方法

    serializeArray()方法说明: 实例 输出以数组形式序列化表单值的结果: $("button").click(function(){ x=$("form&qu ...

  10. ORACLE union order by

    select * from ( select a.id,a.oacode,a.custid,a.custname,a.xsz,a.salename,a.communicationtheme,a.com ...