第一步,在CSS中引入字体并给名字取一个合适的名字,如下

1
2
3
4
5
6
7
@font-face {
    /* font-properties */
    font-family: pictos;
    src:url('pictos/pictos-web.woff'), 
    url('pictos/pictos-web.ttf'),
    url('pictos/pictos-web.eot'); /* IE9 */
}

font-family定义字体的名字,接下来的src是加载字体文件的位置,之所有有多个url就是因为浏览器兼容问题。

第二步,使用刚刚定义的字体,如下

1
2
3
div {
    font-family: pictos;
}

css如何引入外部字体?的更多相关文章

  1. HTML引入外部字体

    HTML5如何引入外部字体 背景 现在我需要 "Montserrat-ExtraLight ExtraLight"类型的字体,但是html的font-family中找不到这个类型的 ...

  2. CSS引入外部字体方法,附可用demo

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

  3. css引入外部字体使网站字体更美观

    @font-face{font-family: myFont;src:url("../font/timesi.ttf");src:url("../font/timesbi ...

  4. 006-CSS引入外部字体

    我们制作页面css,设置字体,可能会需要加入一些比较特殊的字体,这时候就需要引入这些字体. 方法如下: @font-face { font-family: KuTang;/*定义字体的名字*/ src ...

  5. jsp、css中引入外部资源相对路径的问题

    在jsp页面中添加base,可用相对路径: <% String path = request.getContextPath(); String basePath = request.getSch ...

  6. JS 计算时间差,(引入外部字体文件)

    JavaScript Date() 对象: new Date() :时间对象,会把当前时间作为其初始值: setFullYear() :用于设置月份,可有三个参数,setFullYear(year,m ...

  7. CSS引入外部字体

    @font-face {    font-family: '综艺体';    font-style: normal;    font-weight: normal;    src: url(../cs ...

  8. 不同浏览器css引入外部字体的方式

    /** * 字体后缀和浏览器有关,如下所示 * .TTF或.OTF,适用于Firefox 3.5.Safari.Opera * .EOT,适用于Internet Explorer 4.0+ * .SV ...

  9. 微信小程序如何引入外部字体库iconfont的图标

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 微信小程序不能识别很多文件, 其中就包括外部的字体文件. 那我们怎么突破他的防火线呢, ...

随机推荐

  1. quick-cocos2dx-2.2.4环境搭建

    1.Quick-Coco2d-x介绍 Quick-Coco2d-x是Cocos2d-x在Lua上的增强和扩展版本,廖宇雷廖大觉得官方Cocos2d-x的Lua版本不是太好用,于是便在官方Lua版本的基 ...

  2. js基本知识4

    1. 数组 看电影 电影院 座位 大的变量 里面可以放很多的值 var arr = [1,3,57]; var ar = new Array(); new object(); new Date() v ...

  3. FreeRTOS基础知识

    前面一篇文章介绍了一些命名规范之类的基础知识,但是我觉得还缺少一定前言知识,就是裸机和操作系统有什么区别,为什么我们需要学freertos,因为招聘要求?那么为什么招聘网又会有这个要求呢?所以我们为什 ...

  4. (转载) STL中map用法详解

    Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力,由于这个特性,它完成有可能在我们处理一对一数据的时候 ...

  5. 002servlet生命周期以及有关servlet的各种知识

    4 Sevlet的生命周期(重点) 有关servlet的类有Servlet,HttpServlet以及GenericServlet. 其实我们要写一个Servlet只要写一个类去实现Servet就可以 ...

  6. 第二百六十节,Tornado框架-内置模板方法

    Tornado框架-内置模板方法 直接在html文件使用,不需要传值 Tornado默认提供的这些功能其实本质上就是 UIMethod 和 UIModule,也就是Tornado框架定义好的html文 ...

  7. php -- 修改字符串的编码格式

    网上的都是这样用的 $content = iconv("utf-8","gb2312",$content); 这样做其实也对着了,看着确实是把utf-8转化为g ...

  8. Linxu内核参数详解

    #表示SYN队列的长度,默认为1024,加大队列长度,可以容纳更多等待连接的网络连接数. net.ipv4.tcp_max_syn_backlog = 65536 #每个网络接口接收数据包的速率比内核 ...

  9. thinkPHP隐藏url地址栏中的index.php方法

    http://localhost/workSpace/First/index.php/Home/Index/index隐藏上面url中的index.php方法如下: 第一步.删除apache配置文件( ...

  10. MathType中输入不了汉字如何处理

    MathType作为一款常见的数学公式编辑器在编辑数学公式时,不仅可以输入英文字符,对中文也有很好的兼容性.但是有些用户在使用MathType编辑公式时,发现一些汉字是输入不进去的,这个时候我们就需要 ...