第一步,在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. [POJ 1236][IOI 1996]Network of Schools

    Description A number of schools are connected to a computer network. Agreements have been developed ...

  2. CentOS7 安装 mplayer

    我google找到这个方法可以简单快速安装 mplayer 和 vlc,centos 7 only. Please google the latest release for the followin ...

  3. basic_string

    // Components for manipulating sequences of characters -*- C++ -*- // Copyright (C) 1997, 1998, 1999 ...

  4. js 控制不同客户端 访问不同CSS js

    function loadCSS(flag) { var t='.css'; if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios ...

  5. 关于mysqli_free_result($result)报错

    运行原来的一个原生的php写的项目,出现mysqli_free_result($result)的警告 Warning: mysqli_free_result() expects parameter 1 ...

  6. Bootstrap学习笔记(6)--导航居中

    说明:没找到好办法 <div class="row"> <ul class="nav nav-pills col-md-offset-4"&g ...

  7. 网页打开新窗口——Window.open()详解

    转载自:http://blog.csdn.net/business122/article/details/8281142 Window.Open详解 一.window.open()支持环境:JavaS ...

  8. 开启Visual Studio 2013时,出现Microsoft.VisualStudio.Web.PasteJson.JsonPackage无法载入的可能解決方案

    1.先下载:http://www.jb51.net/dll/Microsoft.VisualStudio.Web.PasteJson.dll.html Microsoft.VisualStudio.W ...

  9. cs108 03 ( 调试, java通用性)

    Debuger Great questions These questions will solve most bugs: what method shows the symptom ? what l ...

  10. 【UVa】Palindromic Subsequence(dp+字典序)

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=465&page=s ...