zoukankan      html  css  js  c++  java
  • css引入外部字体

    <style> 
    @font-face
    {
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
         url('Sansation_Light.eot'); /* IE9+ */
    }
    
    div
    {
    font-family:myFirstFont;
    }
    </style>

    不同浏览器字体的格式有差别

    Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。

    Internet Explorer 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字体 (Embedded OpenType)。

    注释:Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

    字体后缀和浏览器有关,如下所示
    * .TTF或.OTF,适用于Firefox 3.5、Safari、Opera 
    * .EOT,适用于Internet Explorer 4.0+ 
    * .SVG,适用于Chrome、IPhone 
    比如:
    @font-face {
        font-family: 'HansHandItalic';
        src: url('fonts/hanshand-webfont.eot');
        src: url('fonts/hanshand-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/hanshand-webfont.woff') format('woff'),
             url('fonts/hanshand-webfont.ttf') format('truetype'),
             url('fonts/hanshand-webfont.svg#webfont34M5alKg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
     
  • 相关阅读:
    日期格式
    v-model修饰符
    从0到1构建全栈知识体系
    Element组件,v-for循环,表单验证方法
    上传文件转换为base64图片
    gulp4进阶
    gulp4快速入门
    TS-接口
    webpack4.0高级
    webpack4.0基础
  • 原文地址:https://www.cnblogs.com/ccllj/p/9016754.html
Copyright © 2011-2022 走看看