web字体在线转换
文章 2496 0 0 0
发布时间:2018年09月10日

概述

制作网站难免有些字体不是默认的,得通过@font-face来加载自己特定的字体,来实现特定的文字效果。在本篇文章我将给大家介绍

@font-face免费且常用方法并解释各种方法的利弊,具体在自己的项目中怎么使用,还是的读者自己去度量。

(1)CSS3@font-face

首先让我们来谈谈原生态的方式来实现自定义网页字体@font-face的方法,声明一个自定义@font-face的CSS语法是很简单的。基本上只要

你指定字体名和字体文件的路径,一旦指定字体,你就可以将它应用于任何元素。

@font-face {
    font-family: "Custom Font Name"; //定义字体名
    src: url('font.ttf'); //字体文件路径
}
body {
    font-family: "Custom Font Name";
}

但是不同的浏览器支持不同格式的字体,如 IE只支持EOT格式的字体,Firefox支持EOT和TTF格式,Safari支持OTF,TTF和SVG格式字体;显

然我们网站也是要给IE浏览者的看的,所以上一种普通的方法显然无法满足我们要求,所以我们需要更为复杂并适合所有浏览器的方法

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); / IE9/
    src: url('webfont.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /
         url('webfont.woff') format('woff'), / Modern Browsers /
         url('webfont.ttf')  format('truetype'), / Safari, Android, iOS /
         url('webfont.svg#svgFontName') format('svg'); / Legacy iOS /
    }

这种方法呢优势是可以将字体放在自己的服务器上,任自己调试,但缺点是比较复杂,且需要将字体生成不同的格式(这里有个生成字体格式的在线工具:http://www.fontsquirrel.com/fontface/generator) 字体加载慢

(2)google网页字体

google网页字体http://www.google.com/webfonts/unsupported.html 无疑是网页设计者的最佳帮手,只需加载简简单单的几行代码就可以

将字体应用到自己的网页中去;代码如下
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>

这种方法的优势很明显加载快,轻量级且免费,但也有不足之处就是大多数字体提供的样式不多

总的来说不管怎么样第二种方法是目前最适合的方法

评论专区