web自定义炫酷字体_html/css_WEB-ITnose

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

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

站酷梦笔

国内知名设计社区站酷推出的AI插画生成工具

44

查看详情

    .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即为要使用的字体。

截图如下：