注意：

　　由于各个浏览器兼容问题大家还是少用这个，下面是具体的使用方法和效果截图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title></title>

    <style type="text/css">

        *{padding:0px; margin:0px; font-size:50px;}

        @font-face { font-family: test; src: url('alpha_echo.ttf'); }

        @font-face { font-family: test1; src: url('Almendra-Bold.otf'); }

        @font-face { font-family: test2; src: url('MFYueHei_Noncommercial-Regular.otf'); }

        @font-face { font-family: test3; src: url('Ruthie-Regular-OTF.otf'); }

        p{font-family: "test";}

        b{font-family: "test1";}

        span{font-family: "test2";}

        strong{font-family: "test3";}

    </style>

</head>

<body>

    <p style="font-size:40px">asdfasdfasdf白增飞</p>

    <b>adfasdfasdf</b><br />

    <span>白增飞 demo Font test</span>

    <br />

    <strong>baizengfei 白增飞</strong>

</body>

</html>

效果如下：

DIV+CSS外部字体引用的更多相关文章

  1. CSS在线字体库，外部字体的引用方法

    目录: 1:CSS家族五大字体 2:360和谷歌外部字体引用方法 3:谷歌外部字体引用方法详解 4:@font-face用法详解 一: {font-family:serif,sans-serif,fa ...

  2. CSS在线字体库，外部字体的引用方法@font-face

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

  3. DIV+CSS常用的网页布局代码

    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

  4. 常见div+css网页布局（float,absolute）

    网页布局-常见 1,           float布局 (1)常规方法 <div id="warp">     <div id="column&quo ...

  5. css之字体的引用

    font-family 属性设置文本的字体系列. font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体. 注意: 如 ...

  6. CSS引入外部字体方法，附可用demo

    有时候我们做的页面需要用到一些更好看的字体又不想用图片代替,图片会影响加载速度则使用外部字体来显示但是直接通过font-family又不一定全部都行这就需要我们在css中进行定义并且引入字体文件路径然 ...

  7. Java引用外部字体（路径引用）的一些坑

    一 原因 后端负责字体...哎,我们公司的前端真的任性啊... 然后,一路踩了jvm关于字体的坑,重点是,java的报错很随意,甚至不报错,建议直接看最后面. 二 代码 正常要windows装一次字体 ...

  8. DIV+CSS+JS实现色彩渐变字体

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 在WPF（core版本）中引用外部字体不可用问题说明

    这几天使用WPF写软件,想引用外部字体,于是下载了字体文件: 然后在App.xaml中添加了如下代码: <FontFamily x:Key="Digital-7 Mono"& ...

随机推荐

  1. jQuery各种效果举例

    jQuery 所有jQuery详细使用说明请见:http://www.php100.com/manual/jquery/ jQuery的作用是操作浏览器html,从而达到用户的可视化效果,按照功能可分 ...

  2. NDK安装 eclipse 不出现NDK目录问题

    android adt自带eclipse无法设置ndk路径 具体情况是 我在mac上搭建android环境 到android sdk官网下载r23版本的adt时自带的eclipse没有设置ndk路径的 ...

  3. Adatper中获取宽高为0的问题

    但是我们想在getView()中获取ImageView的宽和高存在问题,在getView()里面刚开始显示item的时候利用ImageView.getWidth() 获取的都是0,为什么刚开始获取不到 ...

  4. Amoeba实现mysql主从读写分离

    Amoeba实现mysql主从读写分离 这段在网上看了下关于amoeba的文章,总体感觉好像要比mysql-proxy好的多,也参考了不少的资料,此文章可能与其他文章作者会有雷同的地方,请谅解,但是此 ...

  5. Android如何创建背景透明的Dialog

    一:控制Dialog 的背景方法:1.定义一个无背景主题主题<!--去掉背景Dialog--> <style name="NobackDialog" parent ...

  6. MySQL Error Handling in Stored Procedures---转载

    This tutorial shows you how to use MySQL handler to handle exceptions or errors encountered in store ...

  7. [转] 学习React Native必看的几个开源项目

    http://www.lcode.org/study-react-native-opensource-one/ http://gold.xitu.io/entry/575f498c128fe10057 ...

  8. tcmalloc源码剖析的资料

    1. https://seanhn.wordpress.com/2011/04/14/exploit-necromancy-in-tcmalloc-reviving-the-4-to-n-byte-o ...

  9. unity介绍

  10. Windows开启Telnet

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/SJQ. http://www.cnblogs.com/shijiaqi1066/p/4301513.html ...