【CSS3】字体font
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
#p1{font-size: 50px}
#p2{font-size: 200%}
#p3{font-size: 2em}
#p4{font-size: xx-small;}
#p5{font-size: x-small;}
#p6{font-size: small;}
#p7{font-size: medium;}
#p8{font-size: large;}
#p9{font-size: x-large;}
#p10{font-size: xx-large;}
#p11{font-size: smaller;}
#p12{font-size: larger;}
#p13{font-variant: normal; }
#p14{font-variant: small-caps; }
#p15{font-style: normal;}
#p16{font-style: italic;}
#p17{font-style: oblique;}
#p18{font-weight: normal;}
#p19{font-weight: bold;}
#p20{font-weight: bolder;}
#p21{font-weight: lighter;}
#p22{font-weight: 700;}
#p23{font-weight: 900;}
#p24{font-family: 隶书,楷体}
#p25{font: 30px 隶书 }
</style><!--font-family可设置多个内容,用逗号隔开,若无第一个则匹配第二个以此类推。-->
</head>
<body>
<div>
<p>未设置字体</p>
<p id="p1">font-size规定文本的字体尺寸</p>
<p id="p2">font-size规定文本的字体尺寸</p>
<p id="p3">font-size规定文本的字体尺寸</p>
<p id="p4">font-size规定文本的字体尺寸</p>
<p id="p5">font-size规定文本的字体尺寸</p>
<p id="p6">font-size规定文本的字体尺寸</p>
<p id="p7">font-size规定文本的字体尺寸</p>
<p id="p8">font-size规定文本的字体尺寸</p>
<p id="p9">font-size规定文本的字体尺寸</p>
<p id="p10">font-size规定文本的字体尺寸</p>
<p id="p11">font-size规定文本的字体尺寸</p>
<p id="p12">font-size规定文本的字体尺寸</p>
<p id="p13">font-variant规定是否以小型大写字母的字体显示文本,normal默认值,浏览器会显示一个标准字体</p>
<p id="p14">font-variant规定是否以小型大写字母的字体显示文本,浏览器会显示小型大写字母的字体</p>
<p id="p15">font-style规定文本的字体样式,normal默认值,浏览器会显示一个标准字体</p>
<p id="p16">font-style规定文本的字体样式,italic浏览器会显示一个斜体的字体样式,类似i标签的作用</p>
<p id="p17">font-style规定文本的字体样式,oblique浏览器会显示一个倾斜的字体样式</p>
<p id="p18">font-weight规定字体的粗细,normal默认值,标准粗细。类似b标签的作用</p>
<p id="p19">font-weight规定字体的粗细,bold粗体</p>
<p id="p20">font-weight规定字体的粗细,bolder更粗</p>
<p id="p21">font-weight规定字体的粗细,lighter更细</p>
<p id="p22">font-weight规定字体的粗细,100-900,400等同normal,700等同bold</p>
<p id="p23">font-weight规定字体的粗细,100-900,400等同normal,700等同bold</p>
<p id="p24">font-family规定字体系列,如楷体、隶书等</p>
<p id="p25">font可同时设置字体多种属性,至少要设置字体大小font-size(位置倒数第二)和字体系统font-family(位置最后),font-style、font-variant、font-weight放在前面顺序随便。</p>
<p id="p26">font-face我的自定义字体</p>
</div>
</body>
</html>
@font-face{
font-family: "myfont";
src:url('fonts/FZMWFont.ttf');
}
#p26{font-size:40px;font-family: myfont}
【CSS3】字体font的更多相关文章
- CSS Sprites+CSS3 Icon Font
CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...
- CSS3 字体
CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体. 通过 CSS3,web 设计师可以使用他们喜欢的任意字体. 当您您找到或购买到希望使用的 ...
- W3School-CSS 字体(font)实例
CSS 字体(font)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 ...
- CSS3文字描边 CSS3字体外部描边
给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...
- Android Studio 3.1.2 修改字体(font)大小(size) 及老版本修改主题、字体、颜色 参照地址
Android Studio 3.1.2 修改字体(font)大小(size) 步骤:File-Settings-Editor-Color Scheme-Color Scheme Font-Size ...
- CSS 字体(font)实例
CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...
- 收集的可以下载css3字体图标的网站
http://icomoon.io/app/ 可以选择跟简单调整图标打包成css3 字体下载, http://www.flaticon.com/categories/weapons
- css3 字体、2D转换、3D转换
学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...
- CSS3使用Font Awesome字体图标的控件样例(按钮,工具栏,输入框)
按钮上加入font awesome图标,用原生的input button标签无法实现,查看网上的只能通过<a><li></li></a>实现此功能,通过 ...
随机推荐
- 关于SQLServer数据库中字段值为NULL,取出来该字段放在DataTable中,判断datatable中该字段值是否为NULL的三种方法
1. DataTable dt; //假设字段为name, dt已经保存了数据dt.rows[0]["name"] == ...
- 开源API测试工具 Hitchhiker v0.5更新 - 完善细节
Hitchhiker 是一款开源的支持多人协作的 Restful Api 测试工具,支持Schedule, 数据对比,压力测试,支持上传脚本定制请求,可以轻松部署到本地,和你的team成员一起管理Ap ...
- Python爬虫利器:Beautiful Soup
Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.使用它来处理HTML页面就像JavaScript代码操作HTML DOM树一样方便.官方中文文档地址 1. 安 ...
- 【LintCode·入门】斐波那契数列
斐波那契数列 描述 查找斐波纳契数列中第 N 个数. 所谓的斐波纳契数列是指: 前2个数是 0 和 1 . 第 i 个数是第 i-1 个数和第i-2 个数的和. 斐波纳契数列的前10个数字是: 0, ...
- Nginx的知识分享,继续上次的分享
5. Nginx配置文件精讲二 #这里为后端服务器wugk应用集群配置,根据后端实际情况修改即可,tdt_wugk为负载均衡名称,可以任意指定 #但必须跟vhosts.conf虚拟主机的pass段一致 ...
- 如何在Windows下用cpu模式跑通py-faster-rcnn 的demo.py
关键字:Windows.cpu模式.Python.faster-rcnn.demo.py 声明:本篇blog暂时未经二次实践验证,主要以本人第一次配置过程的经验写成.计划在7月底回家去电脑城借台机子试 ...
- JAVA8新特性(一)
default拓展方法 java8为接口声明添加非抽象方法的实现,也成为拓展方法. public interface Formula { void doSomething(); default voi ...
- 第四届河南省ACM 节能 区间DP
1001: 节 能 时间限制: 1 Sec 内存限制: 128 MB 提交: 21 解决: 9 [提交][状态][讨论版] 题目描述 Dr.Kong设计的机器人卡多越来越聪明.最近市政公司交给卡多 ...
- PHP获取路径或目录实现
<?php /** * PHP获取路径或目录实现 */ //魔术变量,获取当前文件的绝对路径 echo "__FILE__: ========> ".__FI ...
- Subquery returns more than 1 row
Subquery returns more than 1 row表示子查询返回了多行数据 例如: select * from table1 where table1.colums=(select co ...