<!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的更多相关文章

  1. CSS Sprites+CSS3 Icon Font

    CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...

  2. CSS3 字体

    CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体. 通过 CSS3,web 设计师可以使用他们喜欢的任意字体. 当您您找到或购买到希望使用的 ...

  3. W3School-CSS 字体(font)实例

    CSS 字体(font)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 ...

  4. CSS3文字描边 CSS3字体外部描边

    给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...

  5. Android Studio 3.1.2 修改字体(font)大小(size) 及老版本修改主题、字体、颜色 参照地址

    Android Studio 3.1.2  修改字体(font)大小(size) 步骤:File-Settings-Editor-Color Scheme-Color Scheme Font-Size ...

  6. CSS 字体(font)实例

    CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...

  7. 收集的可以下载css3字体图标的网站

    http://icomoon.io/app/ 可以选择跟简单调整图标打包成css3 字体下载, http://www.flaticon.com/categories/weapons

  8. css3 字体、2D转换、3D转换

    学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...

  9. CSS3使用Font Awesome字体图标的控件样例（按钮，工具栏，输入框）

    按钮上加入font awesome图标,用原生的input button标签无法实现,查看网上的只能通过<a><li></li></a>实现此功能,通过 ...

随机推荐

  1. Upgrading an ASP.NET MVC 2 Project to ASP.NET MVC 3 Tools Update

    ASP.NET MVC 3 can be installed side by side with ASP.NET MVC 2 on the same computer, which gives you ...

  2. 【JDK1.8】JDK1.8集合源码阅读——TreeMap（一）

    一.前言 在前面两篇随笔中,我们提到过,当HashMap的桶过大的时候,会自动将链表转化成红黑树结构,当时一笔带过,因为我们将留在本章中,针对TreeMap进行详细的了解. 二.TreeMap的继承关 ...

  3. EntityFramework6与EntityFrameworkCore的区别

    EntityFramework6 EF6 是一个久经考验的数据库访问技术,发展多年,拥有许多特性,并且成熟稳定.2008年EF作为 .Net 3.5 Sp1 和Visual Studio 2008 S ...

  4. C语言的scanf函数

    一. 变量的内存分析 1. 字节和地址 1> 内存以“字节为单位”,Oxffc1,Oxffc2,Oxffc3,Oxffc4....都是字节 ,0x表示的是十六进制 2> 不同类型占用的字节 ...

  5. 【机器学习】彻底搞懂CNN

    之前通过各种博客视频学习CNN,总是对参数啊原理啊什么的懵懵懂懂..这次上课终于弄明白了,O(∩_∩)O~ 上世纪科学家们发现了几个视觉神经特点,视神经具有局部感受眼,一整张图的识别由多个局部识别点构 ...

  6. 【转】Cmder--Windows下命令行利器

    原文链接:https://www.cnblogs.com/zqzjs/archive/2016/12/19/6188605.html cmder cmder是一个增强型命令行工具,不仅可以使用wind ...

  7. ##2.基础服务(SQl,RabbitMQ)-- openstack pike

    2-基础服务(SQl,RabbitMQ) openstack pike 安装 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html ##.基础服务(Mysql ...

  8. NodeJS爬虫入门

    1. 写在前面 往常都是利用 Python/.NET 语言实现爬虫,然现在作为一名前端开发人员,自然需要熟练 NodeJS.下面利用 NodeJS 语言实现一个糗事百科的爬虫.另外,本文使用的部分代码 ...

  9. SpringCloud Feign对Hystrix（断路由）的支持

    第一步:首先开启Feign对Hystrix的支持,在properties文件中添加以下配置: feign.hystrix.enabled=true. 第二步:在上一篇Feign的基础上添加Hystri ...

  10. SQL基础教程读书笔记-1

    查询基础 2.2 算数运算符和比较运算符 2.2.1算数运算符 + - * / 需要注意NULL 5 + NULL 10 - NULL 1 * NULL 4 / NULL NULL / 9 NULL ...