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. 2016暑假多校联合---Death Sequence（递推、前向星）

    原题链接 Problem Description You may heard of the Joseph Problem, the story comes from a Jewish historia ...

  2. python套接字基本使用

    socket socket通常也称作"套接字",用于描述IP地址和端口,应用程序通常通过"套接字"向网络发出请求或者应答网络请求,可以认为是一种计算机网络的数据 ...

  3. spring入门（一）

    前面介绍了spring环境的搭建,在搭建spring环境的时候分为java环境和javaWeb环境,在javaWeb环境下通常会结合springMVC使用,在java项目中只需要把spring的包导入 ...

  4. textview滑动效果

    网上很多在xml中改的我经过试验没用,可能是版本不兼容的原因,但在java代码中改有用head_tv1.setEllipsize(TextUtils.TruncateAt.MARQUEE);head_ ...

  5. Java新集合示意图

    Java的新集合实际上只有3个集合组件:①Map ②List ③Set 在Java 1.2后应该尽量避免使用Hashtable,Vector 和Stack: 假如在一个列表中部进行大量的插入和删除操作 ...

  6. 【转】定时自动启动任务crontab命令用法

    每个操作系统都有它的自动定时启动程序的功能,Windows有它的任务计划,而Linux对应的功能是crontab. crontab简介 crontab命令常见于Unix和类Unix的操作系统之中,用于 ...

  7. C# 如何实现带消息数的App图标

    上次写了一篇博文,但是每次更新图标时,桌面会闪烁(刷新),有博友说人家的图标都不会刷新,还能动画.我想了一下,如果要达到这个效果,可以用Form来实现,就是在Form中嵌入一个图片,然后用一个labe ...

  8. iOS 代理反向传值

    在上篇博客 iOS代理协议 中,侧重解析了委托代理协议的概念等,本文将侧重于它们在开发中的应用. 假如我们有一个需求如下:界面A上面有一个button.一个label.从界面A跳转到界面B,在界面B的 ...

  9. Hadoop 2.5.1集群安装配置

    本文的安装只涉及了hadoop-common.hadoop-hdfs.hadoop-mapreduce和hadoop-yarn,并不包含HBase.Hive和Pig等. http://blog.csd ...

  10. MAPINFO中利用GridMaker工具创建栅格图层

    在工作中需要使用栅格地图,以往都是由研发人员来创建,今天偶然发现Mapinfo中有GridMaker这样一个工具,结合网络搜索自己试了一下,居然做成功了,这里把步骤记录下来,方便以后查看. 1.首先在 ...