首頁 > web前端 > html教學 > web自定义炫酷字体_html/css_WEB-ITnose

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

WBOY
發布: 2016-06-24 11:50:23
原創
1577 人瀏覽過

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

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

截图如下:

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板