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

截图如下:

web自定义炫酷字体

上一篇:OpenFileDialog对话框Filter属性


下一篇:OpenFileDialog对话框Filter属性(转)