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. Obj-C的hello,world 2

    https://github.com/facebook/facebook-ios-sdk/blob/master/src/FBAppEvents.h + (void)logEvent:(NSStrin ...

  2. ZT: WEB学习资料

    根据个人经验整理一些Web开发的一些技术书籍,希望对需要进入Web开发领域的TX有所指导,由于是在家里整理的,所有每本书对应的豆瓣链接打不开,如果整理有缺陷请多多指出. 入门篇:通过相关技术的全面基础 ...

  3. Sublime text 2 快捷键配置文件

    分屏快捷键 command+alt+2(就是view菜单中layout后跟数字,有1234,快捷键都带有提示符) 格式化快捷键 ctrl+alt+f 这里提到一个和sublime无关的..comman ...

  4. Java中final、finally和finalize的区别（转）

    http://www.cnblogs.com/bluestorm/archive/2012/04/22/2464746.html final 用于声明属性,方法和类,分别表示属性不可变,方法不可覆盖, ...

  5. Qt入门（17）——组装复杂的控件

    下面是如何把两个窗口部件封装成一个新的组件.首先,我们使用一个自定义的窗口部件作为一个子窗口部件. #include <qapplication.h> #include <qpush ...

  6. HDU 1495 非常可乐 BFS 搜索

    http://acm.hdu.edu.cn/showproblem.php?pid=1495 题目就不说了, 说说思路! 倒可乐 无非有6种情况: 1. S 向 M 倒 2. S 向 N 倒 3. N ...

  7. 迭代加深搜索算法总结 + Editing a Book UVa11212题解

    迭代加深搜索算法: 对于可以用回溯法解决,但是解答树结点数大的恐怖的问题的一种解决办法,有的问题甚至用bfs连一层节点都遍历不完就超时了.具体方法就是依次枚举搜索层数,从1到一个上限. 结构: int ...

  8. 解决mysql不能远程登录的问题

    1. 改表法.可能是你的帐号不允许从远程登陆,只能在localhost.这个时候只要在localhost的那台电脑,登入mysql后,更改 "mysql" 数据库里的 " ...

  9. redis学习心得之二【redis主从配置】

    在前一节我们已经实践启动了一个redis服务,我们将其作为主机,现为其创建一个从机作备份使用 1.复制一份配置出来为从机所用 ~$ cp       redis/etc/redis.conf     ...

  10. javascrip实现无缝滚动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...