zoukankan      html  css  js  c++  java
  • web自定义炫酷字体

    电脑有已经安装好的字体,但是如果你有特殊需要而要选择其他字体,则需要以下几个步骤

    1、寻找适合你的字体

        有下面几个站点提供字体下载:

       www.theleagueofmoveabletype.com

       www.exljbris.com

       www.fontex.org

       http://openfontlibrary.org

       www.fontsquirrel.com

       www.google.com/webfonts

    2、字体有多种格式,不同浏览器支持也不一样

        .eot 这个字体只适合IE浏览器,如果你只有.woff字体,为了让IE也可以显示改字体,可以通过站点 

        www.fontsquirrel.com/fontface/generator生成不同后缀的字体。

        .ttf(True Type and open Type) 这个字体支持的设备比较广泛:IE 9 and later, Firefox, Chrome, Safari, Opera,
    iOS Safari (version 4.2 and later), Android, and the Blackberry Browser

        .woff 这个是一个新的字体格式,为web量身订做,这通常是.ttf格式的压缩版本,所以体积更小,下载更快,支持的浏览器包括: IE 9 and later, Firefox, Chrome, Safari, Opera,
    Blackberry browser, and iOS Safari version 5 and later,但是android是不支持该字体的。

        .svg  Internet Explorer 和 Firefox都不支持该字体,体积是其他字体的两倍大,唯一的优点是支持老版本的Safari4.1我这更早的版本。
        

      3、初始化改字体

         将.eot、.ttf、.woff、.svg字体都放到同一个目录下 ,譬如 webfonts目录,譬如我在这个站点下载了一个字体 https://www.theleagueofmoveabletype.com/linden-hill

         在style里声明改字体:

         @font-face {
              font-family: 'LindenHill';
              src: url('webfonts/LindenHill-Italic-webfont.eot');
              src: url('webfonts/LindenHill-Italic-webfont.eot?#iefix') format('embedded-opentype'),
              url('webfonts/LindenHill-Italic-webfont.woff') format('woff'),
              url('webfonts/LindenHill-Italic-webfont.ttf') format('truetype'),
              url('webfonts/LindenHill-Italic-webfont.svg') format('svg');
          }

          写这么多字体格式的目的你懂得,支持多种浏览器。

    4、使用该字体

         .main p {
            color: #616161;
            font-family: LindenHill, Baskerville, serif;
            font-size: 1.1em;
            line-height: 150%;
            margin-bottom: 10px;
            margin-left: 80px;
          }

           font-family里的LindenHill即为要使用的字体。

    截图如下:

  • 相关阅读:
    python使用mysql数据库
    拆掉思维里的墙
    拆掉思维里的墙
    拆掉思维里的墙
    loadrunner通过web的post请求方法测接口 2
    loadrunner通过web的post请求方法测接口 2
    loadrunner通过web的post请求方法测接口 1
    luogu P1186 玛丽卡
    luogu P1855 榨取kkksc03
    暑期前复习
  • 原文地址:https://www.cnblogs.com/liuminghai/p/4238256.html
Copyright © 2011-2022 走看看