CSS Fonts (字体)

CSS 字体

CSS字体属性定义字体，加粗，大小，文字样式。

serif 和 sans-serif 字体之间的区别

Serif vs. Sans-serif

Remark在计算机屏幕上，sans-serif 字体被认为是比 serif 字体容易阅读

CSS字型

在CSS中，有两种类型的字体系列名称：

  • 通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）

  • 特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"）

Generic family 字体系列 说明
Serif Times New Roman
Georgia 		Serif字体中字符在行的末端拥有额外的装饰
Sans-serif Arial
Verdana 		"Sans"是指无 - 这些字体在末端没有额外的装饰
Monospace Courier New
Lucida Console 		所有的等宽字符具有相同的宽度


Remark 除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：

  • Serif 字体
  • Sans-serif 字体
  • Monospace 字体
  • Cursive 字体
  • Fantasy 字体

字体系列

font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如 Font Family："宋体"。

多个字体系列是用一个逗号分隔指明：

实例

p{font-family:"Times New Roman", Times, serif;}

尝试一下 »

对于较常用的字体组合，看看我们的 Web安全字体组合。

字体样式

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值：

  • 正常 - 正常显示文本

  • 斜体 - 以斜体字显示的文字

  • 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

实例

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

尝试一下 »

italic 和 oblique 的区别

  • 斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。
  • 倾斜（oblique）文本是正常竖直文本的一个倾斜版本。

通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

字体大小

font-size 属性设置文本的大小。

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

请务必使用正确的HTML标签，就<h1> - <h6>表示标题和<p>表示段落：

字体大小的值可以是绝对或相对的大小。

绝对大小：

  • 设置一个指定大小的文本

  • 不允许用户在所有浏览器中改变文本大小

  • 确定了输出的物理尺寸时绝对大小很有用

相对大小：

  • 相对于周围的元素来设置大小

  • 允许用户在浏览器中改变文字大小

Remark如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。

设置字体大小像素

设置文字的大小与像素，让您完全控制文字大小：

实例

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

尝试一下 »

上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 调整文本大小。

注意：以上实例不能在IE9以前的版本运行。

虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本

用em来设置字体大小

为了避免 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。

em 的尺寸单位由W3C建议。

1em 和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 30px，那么公式需改为：pixels/30=em）

实例

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

尝试一下 »

在上面的例子，em 的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

不幸的是，仍然是 IE 浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。

使用百分比和EM组合

在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比：

实例

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

尝试一下 »

我们的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

Examples

更多实例

设置字体加粗
这个例子演示了如何设置字体的加粗。

可以设置字体的转变
这个例子演示了如何设置字体的转变。

在一个声明中的所有字体属性
本例演示如何使用简写属性将字体属性设置在一个声明之内。

设置字体风格

本例演示如何设置字体风格。

在线生成字体CSS样式工具

使用在线生成字体CSS样式工具可以快速生成 CSS 字体样式


 

所有CSS字体属性

Property 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。


目录

CSS 教程

CSS 教程导读
CSS 简介
CSS 语法
CSS AI 通义灵码 VSCode插件安装与功能详解
CSS Id 和 Class选择器
CSS 创建
CSS Backgrounds (背景)
CSS Text(文本)
CSS Fonts (字体)
CSS 链接样式
CSS 列表样式 (ul)
CSS Table (表格)
CSS Box Model (盒子模型)
CSS Border (边框)
CSS 轮廓（outline）属性
CSS Margin(外边距)
CSS Padding（填充）
CSS 分组和嵌套
CSS 尺寸 (Dimension)
CSS Display (显示) 与 Visibility（可见性）
CSS Positioning (定位)
CSS Float（浮动）
CSS 水平对齐 (Horizontal Align)
CSS 组合选择符
CSS 伪类
CSS 伪元素
CSS 导航栏
CSS 下拉菜单
CSS 图片廊
CSS 图像透明/不透明
CSS 图像拼合技术
CSS 媒体类型
CSS 属性选择器
CSS 选择器优化指南：提升网页性能与加载速度
CSS 总结
CSS 实例

CSS 响应式设计

响应式 Web 设计 – Viewport
响应式 Web 设计 – 网格视图
响应式 Web 设计 – 媒体查询
响应式 Web 设计 – 图片
响应式 Web 设计 – 视频(Video)
响应式 Web 设计 – 框架

CSS实例

CSS 编程实战闯关
CSS 实例
CSS 测验

CSS 拓展阅读

看这一篇就够了,css选择器知识汇总
学会这几种方法css居中很简单
css样式就得这么写(css参考样式集合)
CSS 透明度设置方法及常见问题解析
你想知道的css hack知识全都帮你整理好了
DIV+CSS布局基本流程及实例介绍
初学者必读：CSS是什么？DIV+CSS又是什么？
CSS 布局的基础方法及css布局技巧
厉害了我的哥,css图片居中原来有这么多种方法
CSS 淘宝导航代码集合（附使用技巧）
CSS虚线实现方法及多种应用实例
CSS滚动条实现步骤及美化小技巧
详细的css导航条实现代码及素材下载
CSS两端对齐语法及代码实例教学
CSS半透明属性介绍及代码实例
CSS加载失败的6个原因
HTML引入CSS的常见方法及解析
css鼠标样式语法及20种可选值（属性）
四款好看实用的CSS表格样式分享
CSS与HTML的区别
CSS 术语词典：注释、属性、选择器等核心概念解析

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }