zoukankan      html  css  js  c++  java
  • 在网页中自定义字体

      最近切图遇到了,psd文档与网页字体的冲突。很多字体,系统中都没有安装。在同事和网络的帮助下解决了这个问题...发此文以表感谢,外加自我提醒。

      一、使用Google WebFont字体,网上资料很多,,在这里就不仔细描述了。

      二、如果Goole字体中没有,请看下面的方法

      大体步骤:

          1、下载所需字体。字体下载站提供的字体一般为.TTF格式。

          2、字体转格式。为了确保在主流浏览器中都能正常显示该字体,需要提供3种字体格式。我们可以拿下载下来的.TTF文件去转换得到另外两种格式的字体。字体文件格式的转换可以通过网站FontsQuirrel

                或 onlinefontconverter提供的在线字体转换服务获取。
               .TTF或.OTF 适用于Firefox 3.5、Safari、Opera
              .EOT 适用于Internet Explorer 4.0+
              .SVG 适用于Chrome、IPhone
           3、使用@font-face定义字体。在这里推荐一个好的在线字体转化网站onlinefontconverter

           4、在html里面调用CSS。

    @font-face{ 
    font-family:'TrajanPro-Regular';
    src: url('webfont/TrajanPro-Regular.eot'); /* IE9*/
    src:url('webfont/TrajanPro-Regular.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
        
        url('webfont/TrajanPro-Regular.woff') format('woff'),/* chrome、firefox */
        url('webfont/TrajanPro-Regular.ttf') format('truetype'),/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('webfont/TrajanPro-Regular.svg#svgFontName') format('svg'); /*  iOS 4.1- */
    
    }

    使用后的效果图如下:

      

        

    完整实例下载

  • 相关阅读:
    【2020-04-03】多注意一下自己闲下来的思绪
    vue 去哪网项目 学习笔记(一)
    数据分析相关的内容
    vue 自学项目笔记
    vue 所有的指令
    vue 自学笔记(5) 列表渲染
    vue 自学笔记(4): 样式绑定与条件渲染
    vue 自学笔记(三) 计算属性与侦听器
    自学vue笔记 (二) : 实例与生命周期
    杜教BM模板
  • 原文地址:https://www.cnblogs.com/youmeng/p/2957067.html
Copyright © 2011-2022 走看看