WEB字体格式

2016-09-30 · 🙈Ray · 0条 · 4823次

在开发网站的时候,我们一般会采用别人写好的一些UI框架,这样会加快开发进度。我一直很想和同事开发一套自己的UI框架,一直也没有机会。

一般来说,在这些框架中,他们已经采用了一些字体。像Bootstrap和Material Design(谷歌的字体)都有自己使用的字体。

但是对于某些网站来说,为了追求一些不同的效果,会采用一些比较可爱或者好玩的字体。这个时候就需要自己去为网站设置需要字体。

这里介绍一下WEB常用字体格式。

1. TrueType(.ttf)

Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印输出的一致性。同时,这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

2. EOT-Embedded Open Type(.eot)

嵌入字体格式(EOT)是微软开发的一种技术,允许OpenType字体嵌入到网页并可以下载至浏览器渲染,浏览器根据CSS中@font-face的定义,下载,渲染这种.eot后缀的字体文件。这些文件只在当前页活动的状态下,临时安装在用户的系统中。

3. OpenType(.otf)

OpenType是一种可缩放字型(scalable font)电脑字体类型,采用PostScript格式,是美国微软公司与Adobe公司联合开发,用来替代TrueType字型的新字体。这类字体的文件扩展名为.otf,类型代码是OTTO,现行标准为OpenType1.4 。OpenType最初发表于1996年,并在2000年之后出现大量字体。它源于微软公司的TrueType Open字型,TrueType Open字型又属于TrueType字型。OpenType Font包括了Adobe CID-Keyed font技术。Adobe公司已经在2002年末将其字体库全部改用OpenType格式。

4. WOFF-Web Open Font Format(.woff)

相对于TrueType和OpenType,WOFF(Web开发字体格式)是一种专门为了Web而设计的字体格式标准,它并不复杂,实际上只是对于TrueType/OpenType等字体格式的封装,并针对网络加以优化。每个字体文件中含有字体以及针对字体的元数据(Metadata),字体文件被压缩,以便于网络传输,并且不包含任何加密或者DRM措施,包括Adobe、Lino Type、Monotype在内的几乎所有主要的字体供应商都加入到支持WOFF的行列中来。

5. SVG(Scalable Vector Graphics) Fonts(.svg)

使用SVG技术来呈现字体,还有一种gzip压缩格式的SVG字体.svgz。SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG由W3C指定,是一个开放标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。SVG可以使你设计的网页更加精彩细致,使用简单的文本命令,SVG可实现色彩线性变化、路径、自定义字体、透明效果、滤镜效果等各式常见的图形图像效果。

下面介绍一些比较好的字体类型转换的网站,但是因为中国文化博大精深,文字异常丰富,这就导致一个严重的问题,字体不好设计啊,所以这些字体转换网站对中文字体不适用啊。不像西文,26个字母组成了整个世界,多气人。

1.Free Online Font Converter

2.Fontsquirrel

3.everythingfonts


最后介绍一个可以为你网站生成你想要的字体的网站——有字库。这个网站可以为你的网页生成在线字库,只需要引用JS和CSS文件即可。还是比较方便的,但是我不想用。还是喜欢字体文件存放在自己的服务器。

这个网站里的字体还是蛮多的。

使用也很简单,有两种方式:

一种是CSS方式,适用于静态网页, 对于静态页面,把内容输入进去,就可以生成css样式类,然后按照它的说明引用就好了。

另外一种是卢教模式,该模式适用于动态页面,按照说明,引入JS即可,卢教模式是根据你网页内容的变化生成这些字的字体。


  0