CSS 字体(font)实例

CSS 实例

  • CSS 背景实例
  • CSS 文本实例
  • CSS 字体(font)实例
  • CSS 边框(border)实例
  • CSS 外边距 (margin) 实例
  • CSS 内边距 (padding) 实例
  • CSS 列表实例
  • CSS 表格实例
  • 轮廓（Outline） 实例
  • CSS 尺寸 (Dimension) 实例
  • CSS 分类 (Classification) 实例
  • CSS 定位 (Positioning) 实例
  • CSS 伪类 (Pseudo-classes)实例
  • CSS 伪元素 (Pseudo-elements)实例

01设置文本的字体

<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>01设置文本的字体</title>

		<style type="text/css">

			body {

				background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151207120828824-739848359.jpg);

			}

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

			p.sansserif {font-family: Arial,Verdana,Sans-serif;}

		</style>

	</head>

	<body>

		<h1>CSS font-family</h1>

		<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>

		<p class="sansserif">This is a paragraph, shown in the Arial font.</p>

	</body>

</html>

02设置字体尺寸

<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>02设置字体尺寸</title>

		<style type="text/css">

			body {

				background-color: #CCFFFF;

			}

			h1 {

				font-size: 300%;

			}

			h2 {

				font-size: 200%;

			}

			p {

				font-size: 100%;

			}

		</style>

	</head>

	<body>

		<h1>我是标题1</h1>

		<h2>我是标题2</h2>

		<p>我是一个段落</p>

	</body>

</html>

03设置字体风格

<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>03设置字体风格</title>

		<style type="text/css">

			body {

				background-color: #CCFFFF;

			}

			h1 {

				font-style: normal;

			}

			h2 {

				font-style: italic;

			}

			p {

				font-style: oblique;

			}

		</style>

	</head>

	<body>

		<h1>One always has time enough, if one will apply it well.</h1>

		<h2>One always has time enough, if one will apply it well.</h2>

		<p>One always has time enough, if one will apply it well.</p>

	</body>

</html>

04设置字体的异体

<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>04设置字体的异体</title>

		<style type="text/css">

			body {

				background-color: #CCFFFF;

			}

			p.normal {

				font-variant: normal;

			}

			p.small {

				font-variant: small-caps;

			}

		</style>

	</head>

	<body>

		<p class="normal">One always has time enough, if one will apply it well.</p>

		<p class="small">One always has time enough, if one will apply it well.</p>

	</body>

</html>

05设置字体的粗细

<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>05设置字体的粗细</title>

		<style type="text/css">

			body {

				background-color: #CCFFFF;

			}

			p.normal {

				font-weight: normal;

			}

			p.thick {

				font-weight: bold;

			}

			p.thicker {

				font-weight: 900;

			}

		</style>

	</head>

	<body>

		<p class="normal">Where is the 哈哈 point?</p>

		<p class="thick">Where is the 哈哈 point?</p>

		<p class="thicker">Where is the 哈哈 point?</p>

	</body>

</html>

06所有字体属性在一个声明之内

<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>06所有字体属性在一个声明之内</title>

		<style type="text/css">

			body {

				background-color: #CCFFFF;

			}

			p.sty1 {

				font: italic arial, sans-serif;

			}

			p.sty2 {

				font: italic bold 20px/100px arial, sans-serif;

			}

		</style>

	</head>

	<body>

		<p class="sty1">Where is the 哈哈 point?</p>

		<p class="sty2">Where is the 哈哈 point?</br>

		   (我的大小20px行高100px)</p>

	</body>

</html>

CSS字体实例总结

W3School-CSS 字体(font)实例的更多相关文章

  1. CSS 字体(font)实例

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

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

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

  3. CSS(2)---css字体、文本样式属性

    css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...

  4. CSS：CSS 字体

    ylbtech-CSS:CSS 字体 1.返回顶部 1. CSS 字体 CSS字体属性定义字体,加粗,大小,文字样式. serif和sans-serif字体之间的区别  在计算机屏幕上,sans-se ...

  5. 3.CSS字体属性

    CSS Fonts(字体)属性用定义字体系列,大小粗细,和文字样式(如斜体) 3.1字体系列 CSS使用font-family属性定义文本字体系列 p { font-family:'微软雅黑' ;} ...

  6. CSS字体属性大全

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

  7. css字体图标的使用方法

    提要:对于传统的一般用css雪碧(css sprite)来搞,目前大部分网站已经主要字体图标 ,利用font+css 或者font+html 来开发,今天总结了一下,记录之~ css sprite用背 ...

  8. Css - 字体图标

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

  9. CSS 分类 (Classification) 实例

    CSS 分类 (Classification) 实例CSS 分类属性 (Classification)CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素 ...

随机推荐

  1. EffectiveJava——请不要在代码中使用原生态类型

    先看一个栗子,看看能不能找出来里面的错误: /** * 请不要在新代码中使用原生态类型 * @author weishiyao * */ public class Test { public stat ...

  2. Javascript单元测试Unit Testing之QUnit

    body{ font: 16px/1.5em 微软雅黑,arial,verdana,helvetica,sans-serif; }           QUnit是一个基于JQuery的单元测试Uni ...

  3. cnodejs社区论坛4--话题列表

  4. JS代码实用代码实例（输入框监听，点击显示点击其他地方消失,文件本地预览上传)

    前段时间写前端,遇到一些模块非常有用,总结以备后用 一.input框字数监听 <!DOCTYPE html> <html lang="en"> <he ...

  5. texrecon进行纹理映射

    使用texrecon进行纹理映射: 1)       跳转到mesh所在目录 cd meshdir 2)       参数 a)         texrecon.exe b)         bun ...

  6. telnetlib/SNMP

    telnetlib telnetlib 总体来讲还是很好理解的,因为已经耍过paramiko 关于 .read_very_eager(), 简单理解就是就是读尽量多,读到没有反馈了为止 关键功能 1) ...

  7. 轻量级富文本编辑器wangEditor源码结构介绍

    1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.c ...

  8. bootstrap源码分析之form、navbar

    一.表单(Form) 源码文件:_form.scssmixins/_form.scss 1.按层次结构分:form-group -> form-control/input-group/form- ...

  9. Dense.js - 响应式的视网膜（Rtina）图像支持

    Dense 是一款 jQuery 插件,它提供一个简单的方法为设备提供精密像素比的图像,为你的网站带来视网膜支持,清除模糊,图像更清晰.通过简单地包括 jQuery 插件的页面上,就能实现响应式的视网 ...

  10. Glide.js：响应式 & 触摸友好的 jQuery 滑块插件

    Glide.js 是一款响应式和对触摸友好的 jQuery 滑块.基于 CSS3 转换实现,并在低版本浏览器降级处理.Glide.js 简单,重量轻,快速,适用于智能手机,平板电脑和台式机.它支持 s ...