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. MacOS下如何进行Git的冲突(Conflict)处理

    Git在做merge时经常碰到冲突的问题,多数情况都是用IDE中集成的"解决冲突"工具解决了,但有时不能依赖IDE时,就得回过头来去搞清楚Git的一些基础操作了. mergetoo ...

  2. servlet基本原理(手动创建动态资源+工具开发动态资源)

    一.手动开发动态资源 1 静态资源和动态资源的区别 静态资源: 当用户多次访问这个资源,资源的源代码永远不会改变的资源. 动态资源:当用户多次访问这个资源,资源的源代码可能会发送改变. <scr ...

  3. static的用法

    首先,看看变量的存储: int global ; int main() { int stackStore ; int heapStore* = (int *)malloc(sizeof(int)); ...

  4. servlet同一用户不同页面共享数据

    如何实现不同页面之间的数据传递,实现页面的数据共享?常见的方法有以下4种: 1)表单提交(form) 2)sendRedirect()跳转 3)session技术 4)Cookie技术 表单提交 这是 ...

  5. Egret白鹭H5小游戏开发入门（三）

    前言: 在上一篇文章中着重介绍了H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明等等,那么今天主要是涉及到场景的创建,loading的修改等等的代码编写. 对于这一节,我在讲解的过 ...

  6. SharePoint 2013 Error - File names can't contain the following characters: & " ? < > # {} % ~ / \.

    错误截图: 错误信息: --------------------------- Message from webpage --------------------------- File names ...

  7. SharePoint 2013 同步FBA认证用户

    SharePoint 开启了基于FBA的身份认证,经常会遇到用户组用户的问题,当我加入一个AD账号,无法同时加入Form认证的用户,这时,只能手动添加,比较麻烦:所以,写了一个服务,用来每天晚上同步一 ...

  8. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q1-Q3)

    这里我把从网上搜集到的针对Sharepoint 70-576的有关练习进行系统的解析,整理成一个系列, 分期.分批次共享出来,供大家研究. 70-573考试注重的是"知道"相关知识 ...

  9. LruCache详解之 Android 内存优化

    概念: LruCache 什么是LruCache? LruCache实现原理是什么? 这两个问题其实可以作为一个问题来回答,知道了什么是 LruCache,就只然而然的知道 LruCache 的实现原 ...

  10. 【代码笔记】iOS-竖状图

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...