Windows10操作系统使用实例:

1.准备好对应格式的字体库

2.方正字体使用实例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style>
@font-face {
font-family: 'fzbold';
/*IE浏览器支持的字体类型,但是会渲染延迟*/
src: url('../Fonts/方正粗活意简体.eot');
src: url('../Fonts/方正粗活意简体.eot#iefix') format('embedded-opentype'),
/*Google 浏览器,火狐浏览器支持的字体类型*/
url('../Fonts/方正粗活意简体.ttf') format('truetype');
}
@font-face {
font-family: 'seymourone';
src: url('../Fonts/seymourone-regular.eot') format('embedded-opentype');
}
.txtOne {
font: normal 25px 'fzbold';
border: 1px solid red;
padding: 10px;
}
.txtTwo {
font: bold 25px;
font-family: seymourone,宋体;
border: 1px solid red;
padding: 10px;
}
</style>
</head>
<body>
<p class="txtOne">中文内容</p>
<br />
<p class="txtTwo">abc</p>
</body>
</html>

IE下显示结果:

Google/FF下显示结果:

Android系统下的浏览器访问:

3.花纹行楷字体使用:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style>
@font-face {
font-family: '华文行楷';
src: url('../Fonts/华文行楷.eot') format('embedded-opentype'), url('../Fonts/华文行楷.ttf') format('truetype');
} .txtOne {
font: normal 25px '华文行楷';
border: 1px solid red;
padding: 10px;
}
.txtTwo {
font: bold 25px;
font-family: 华文行楷,宋体;
border: 1px solid red;
padding: 10px;
}
</style>
</head>
<body>
<p class="txtOne">中文内容</p>
<br />
<p class="txtTwo">abc</p>
</body>
</html>

IE/Google/FF显示结果:

CSS3 @font-face使用实例的更多相关文章

  1. HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

    首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...

  2. CSS3之3D变换实例详解

    CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...

  3. html5+css3 微信开发-学习实例

    例子1.控制数据只显示两行并且最后使用省略号 样式如下: .ControlDataRows{ overflow : hidden; text-overflow: ellipsis; display: ...

  4. web前端学习(三)css学习笔记部分(5)-- CSS动画--页面特效、HTML与CSS3简单页面效果实例

    CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7.  CSS动画--页面特效 7.1  2D.3D转换 7.1.1  通过CSS3转换,我们能够对元素进行 ...

  5. CSS3 flexbox弹性布局实例

    常用例子 1.居中对齐 <!DOCTYPE html> <head> <meta charset="utf-8"> <style type ...

  6. css基础之 font的简写规则 以及 自定义 CSS3 @font-face详细用法

    Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解c ...

  7. 《HTML5与CSS3实例教程》

    <HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...

  8. HTML5 CSS3 专题 :诱人的实例 3D旋转木马效果相册

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  9. HTML5 CSS3 专题 :诱人的实例 3D旋转木马效果相冊

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  10. HTML5与CSS3实例教程(第2版) 附源码 中文pdf扫描版

    HTML5和CSS3技术是目前整个网页的基础.<HTML5与CSS3实例教程(第2版)>共分3部分,集中讨论了HTML5和CSS3规范及其技术的使用方法.这一版全面讲解了最新的HTML5和 ...

随机推荐

  1. ps怎么把白色背景变透明

  2. Java多线程之join

    1.join方法只有在继承了Thread类的线程中才有. 2.线程必须要start() 后再join才能起作用. 将另外一个线程join到当前线程,则需要等到join进来的线程执行完才会继续执行当前线 ...

  3. ASPNET5中的那些K

    ASPNET5中的那些K ASP.NET 5最大的变化是什么?首当其冲的就是多了很多K,K表示的是ASP.NET vNext的项目代号“Project K”,但很容易让人想到一个汉字——“坑”,希望K ...

  4. zookeeper[2] zookeeper原理(转)

    转自:http://cailin.iteye.com/blog/2014486 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,它包含一个简单的原语集,分布式应用程序可以基于它实现 ...

  5. 用pc浏览器打开手机页面

    原理是仿造http包头,下面已chrome为例. 方法:运行->输入如下手机操作系统对应的代码即可. 安卓: chrome.exe --user-agent="Mozilla/5.0 ...

  6. Java I/O---序列化接口Serializable

    1.JDK API 中关于Serializable的描述 public interface Serializable 类通过实现 java.io.Serializable 接口以启用其序列化功能.未实 ...

  7. MongoDB与CouchDB 全方位对比

    http://blog.nosqlfan.com/html/1519.html 本文见于MongoDB官方网站,MongoDB与CouchDB 很相似,他们都是文档型存储,数据存储格式都是JSON型的 ...

  8. Owin学习笔记(一) Owin的前生今世

    ASP.NET框架至今为止已经存在了数十年了,大量的网站使用ASP.NET框架进行开发.随着网站应用开发技术的进步,  许多网站应用开发框架有了新的流行趋势 轻量化 模块化 可移植 ASP.NET框架 ...

  9. JQuery的常用选择器

    刚开始学JQuery写的如有错误欢迎批评指正 JQuery拥有的选择器可以让我们更快更方便找到想要的元素,然后对相应的元素进行操作 简单介绍一下一些常用的选择器: 1.基本选择器: 标签名选择器: $ ...

  10. JavaScript原型与闭包相关

    1什么是对象 js中的值分为引用值和原始值 原始值:undefined  null  Boolean  string  number  原始值无法更改 存放在栈中 引用值:Array  Object  ...