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. hibernate----1-1-----两表关联属性放在另一个表里面

    package com.ij34.dao; import javax.persistence.*; @Entity @Table(name="Address_inf") publi ...

  2. FreeBSD应该装gnome3做桌面

    目前freebsd pkg包管理体系的repo源多了一些,速度快了很多. 仓库中目前的版本为3.14,安装gnome3很简单. pkg install xorg gnome3 echo "e ...

  3. Eclipse的SVN插件下载

    Links for 1.8.x Release:Eclipse update site URL: http://subclipse.tigris.org/update_1.8.xsvn插件包下载: h ...

  4. MUI（2）

    本篇博文是继续MUI(1)博文. 上一篇博文小编写了两个页面,一个页面只写了一个头部导航栏,另一个页面写了一个按钮,然后这两个页面进行合并显示,即在头部导航栏页面加载显示另一个页面的按钮.仔细观察上一 ...

  5. POJ 3276 Face The Right Way 反转

    大致题意:有n头牛,有些牛朝正面,有些牛朝背面.现在你能一次性反转k头牛(区间[i,i+k-1]),求使所有的牛都朝前的最小的反转次数,以及此时最小的k值. 首先,区间反转的顺序对结果没有影响,并且, ...

  6. AES .net 、JS 相互加密解密

    /// <summary> /// AES加密 /// </summary> public class AES { /// <summary> /// 加密 /// ...

  7. jQuery Layer 弹层组件

    layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...

  8. Infinite Scroll - jQuery & WP 无限滚动插件

    无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款  ...

  9. ArcGIS version not specified错误解决方法

    添加下列语句到程序入口前: ESRI.ArcGIS.RuntimeManager.Bind(ESRI.ArcGIS.ProductCode.Engine);

  10. sharepoint多个NLB的web前段如何进行文件同步？

    大家都知道,sharepoint2010服务器场可能有2个或2个以上的web服务器做NLB,有个时候牵涉到上传文件到文件夹(说到这里,有人会说全部以二进制文件保存到文档库啊,但是有些情况不允许的,比如 ...