CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。

  参考:http://www.w3school.com.cn/css/css_font.asp

  

  • CSS字体系列

5种通用字体系列:

① Serif 字体

② Sans-serif 字体

③ Monospace 字体

④ Cursive 字体

⑤ Fantasy 字体

  • 指定字体系类
p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}
  • 字体风格

常用于规定斜体文本。共三个值:normal,italic和oblique。

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
  • 字体变形

可设置小型大写字母。

p.normal {font-variant: normal}
p.small {font-variant: small-caps}

使用:

<p class="normal">This is a test</p>
<p class="small">This is a test</p>

效果:

  • 字体加粗

设置文本的粗细。从100~900为字体指定了9级粗细。400对应normal,而700对应bold。

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:;}

使用:

<p class="normal">This is a test</p>
<p class="thick">This is a test</p>
<p class="thicker">This is a test</p>

效果:

  • 字体大小

设置文本的字体大小。默认普通的默认大小为16像素(16px = 1em)。在IE中很可能要使用em设置字体大小。

h1 {font-size:60px;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

CSS 字体属性

属性 描述
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-size-adjust 当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。)
font-stretch 对字体进行水平拉伸。(CSS2.1 已删除该属性。)
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。

CSS笔记(五)字体的更多相关文章

  1. CSS 笔记五(Combinators/Pseudo-classes/Pseudo-elements)

    CSS Combinators Four different combinators in CSS3 descendant selector (space) child selector (>) ...

  2. CSS 笔记——文本字体

    5. 文本字体 -> 文本 (1)text-indent 基本语法 text-indent : length 语法取值 length : 百分比数字 | 由浮点数字和单位标识符组成的长度值,允许 ...

  3. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  4. 【CSS学习】--- 字体样式

    一.前言 CSS字体属性可以定义文本的字体系列.大小.加粗.颜色.风格(如斜体)和变形(如小型大写字母). CSS的字体属性: font-family 设置字体系列 font-size 设置字体的尺寸 ...

  5. Typescript 学习笔记五:类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  6. CSS Fonts(字体)

    CSS Fonts(字体) 一.serif和sans-serif字体之间的区别 注意: 在计算机屏幕上,sans-serif字体被认为是比serif字体容易阅读. 二.CSS字型 在CSS中,有两种类 ...

  7. CSS笔记--选择器

    CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...

  8. C#可扩展编程之MEF学习笔记(五):MEF高级进阶

    好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较常用 ...

  9. web—第四章css&第五章

     web—第四章css&第五章 终于迎接等待已久的CSS,在没学这个之前,我们只会用一点img,查一点小图片,或者是用style改一下颜色,而且比较麻烦.现在多了个css在文件夹在创建一个cs ...

  10. css中的字体及文本相关属性

    css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...

随机推荐

  1. Understanding the RelationshipType Enumeration [AX 2012]

    Understanding the RelationshipType Enumeration [AX 2012] 3 out of 3 rated this helpful - Rate this t ...

  2. 【jqGrid for ASP.NET MVC Documentation】.学习笔记.7.搜索过滤数据

    1 基础 搜索和过滤功能,是使用确定的条件,查找匹配行数据.jqGrid提供几种搜索模式: Search Dialog 单搜索选项 Search Dialog 多搜索选项 ToolBar Search ...

  3. 模拟namenode崩溃,使用secondarynamenode恢复

    方法一.使用namespaceID 1.在namenode节点上,将dfs.name.dir指定的目录中(这里是name目录)的内容情况,以此来模拟故障发生. [hadoop@node1 name]$ ...

  4. satis 搭建 Composer 私有库的方法

    安装 satis 命令行下执行: php create-project composer/satis --stability=dev --keep-vcs . 配置 创建 satis.json 文件, ...

  5. PHP中使用数组指针函数操作数组示例

    数组的内部指针是数组内部的组织机制,指向一个数组中的某个元素.默认是指向数组中第一个元素通过移动或改变指针的位置,可以访问数组中的任意元素.对于数组指针的控制PHP提供了以下几个内建函数可以利用. ★ ...

  6. Android调试常用的工具简单介绍

    配置Android环境的时候,我们需要安装sdk.在sdk的目录下: platform-tools 目录下的adb tool下的: ddms.bat adb :可以cd 当前目录,然后使用相应的命令, ...

  7. android bluetooth蓝牙移植

    http://blog.csdn.net/zhengmeifu/article/details/7705172 前段时间移植神念系统需要使用到bluetooth功能,现将移植过程中碰到的问题简要列一下 ...

  8. IOS中两个view的切换

    在ios中,rootview为PassWordViewController,secondview为SecondViewController,实现在rootview中听过一个跳转按钮实现跳转到secon ...

  9. java基础:网络编程TCP,URL

    获取域名的两种方法: package com.lanqiao.java.test; import java.net.InetAddress;import java.net.UnknownHostExc ...

  10. 山东理工大学第七届ACM校赛-飞花的线代 分类: 比赛 2015-06-26 10:29 10人阅读 评论(0) 收藏

    飞花的线代 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 飞花壕的线代一直非常的壕(好),线代考试每次都是全班第一.一次,飞花壕在预习 ...