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. BZOJ 1296 粉刷匠

    Description windy有\(N\)条木板需要被粉刷.每条木板被分为\(M\)个格子. 每个格子要被刷成红色或蓝色. windy每次粉刷,只能选择一条木板上一段连续的格子,然后涂上一种颜色. ...

  2. Swordfish

    zoj1203:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1203 题意:给定平面上N个城市的位置,计算连接这N个城市所 ...

  3. 苦练SOC“基本功”启明星辰九年磨一剑

    2011年9月28日——10月31日,国内知名网络安全公司——启明星辰,作为协办方参与了51CTO在2011年举办的中国SOC安全管理平台市场应用现状调查. SOC(Security Operatio ...

  4. Unity 技能按钮触发特效

    unity 版本:4.5.1 NGUI版本:3.6.5 首先,要导入特效资源包,导入应该是基本中的基础,但是对于初学者来说好像很少有这方面的介绍,也许是我现学现用书看的不够认真,因为导入这个问题卡了好 ...

  5. No row with the given identifier exists[ArtProject.Domains.Users#2]

      产生此问题的原因:              有两张表,table1和table2. 产生此问题的原因就是table1里做了关联<one-to-one>或者<many-to-on ...

  6. 【数学】Codeforces 707C Pythagorean Triples

    题目链接: http://codeforces.com/problemset/problem/707/C 题目大意: 给你一个数,构造其余两个勾股数.任意一组答案即可,没法构造输出-1. 答案long ...

  7. 【枚举】Vijos P1496 火柴棒等式 （NOIP2008提高组第二题）

    题目链接: https://vijos.org/p/1496 题目大意: 给你n(n<24)根火柴棍,你可以拼出多少个形如“A+B=C”的等式?("+"和"=&qu ...

  8. UVa11419 SAM I AM（构造最小点覆盖）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=27475 [思路] 二分图的最小点覆盖以及构造最小覆盖. 二分图的最 ...

  9. rpm常用操作

    1.查询.检查软件包 rpm {-q|--query} [select-options] [query-options] rpm {-V|--verify} [select-options] [ver ...

  10. SANSA 上上洛可可 贾伟作品 高山流水 香炉 香插香台香具 高端商务礼品 黑色【正品 价格 图片 折扣 评论】_尚品网ShangPin.com

    SANSA 上上洛可可 贾伟作品 高山流水 香炉 香插香台香具 高端商务礼品 黑色[正品 价格 图片 折扣 评论]_尚品网ShangPin.com