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. Scalaz（45）－ concurrency ：Task－函数式多线程编程核心配件

    我们在上一节讨论了scalaz Future,我们说它是一个不完善的类型,最起码没有完整的异常处理机制,只能用在构建类库之类的内部环境.如果scalaz在Future类定义中增加异常处理工具的话,用户 ...

  2. Server Tomcat v7.0 Server at localhost was unable to&nbs 报错问题解决

    在eclipse启动tomcat时遇到超时45秒的问题: Server Tomcat v7.0 Server at localhost was unable to start within 45 se ...

  3. nginx性能优化之线程池

    默认情况下,nginx的work process按照顺序一个个处理http请求,因此如果后台处理时间较长,则work process会长时间等待IO状态,因此限制并发性.如下所示: 所以,对于可能存在 ...

  4. 编写高性能Javascript代码的若干建议

    多年来,Javascript一直在web应用开发中占据重要的地位,但是很多开发者往往忽视一些性能方面的知识,特别是随着计算机硬件的不断升级,开发者越发觉得Javascript性能优化的好不好对网页的执 ...

  5. VisualCaptcha – 灵活的可视化验证码解决方案

    visualCaptcha 是一个可配置的验证码解决方案,专注于可访问性和简单性,同时保持安全性.它也支持移动,视网膜设备,并有一个创新的可访问性的解决方案. visualCaptcha 现在可以跨多 ...

  6. 汉王云名片识别（SM）组件开发详解

    大家好,最近在DeviceOne平台上做了一个汉王云名片识别的功能组件.下面把我开发过程给大家做一个分享,希望可以帮助到大家. 下面我把我的思路给大家讲解一下.   1.找到我要集成的sdk,也就是汉 ...

  7. JavaScript学习01 语言简介、基本使用和变量声明

    JavaScript语言简介.基本使用和变量声明 JavaScript是网景(Netscape)公司开发的一种基于客户端浏览器.面向对象.事件驱动式的网页脚本语言. JavaScript的前身叫Liv ...

  8. android加固系列—3.加固前先学会破解，静态修改so

    [版权所有,转载请注明出处.出处:http://www.cnblogs.com/joey-hua/p/5138585.html] 项目jni的关键代码(项目地址见文章底部),获取当前程序的包名com. ...

  9. android加固系列—1.如何检验so文件是否加壳成功

    程序对so文件加壳后,如何验证是否加壳成功呢,首先除了能在应用中正常运行外,还要用IDA来检测: 绿色乱码表示rr这个函数成功加密: 工具下载,可支持动态调试版:

  10. Failed to push selection: Read-only file system的解决方法

    1.获得root权限:adb root 2.设置/system为可读写:adb remount 3.将hosts文件复制到PC:adb pull /system/usr/keylayout/mtk-k ...