获取@font-face所需字体格式

转载 2016年05月30日 14:37:08

获取@font-face所需字体格式:

我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式,我们同样是需要第三方工具来实现,下面我给大家推荐一款工具fontsquirrel,跟我点这里进入到下面这个界面吧。

你可以直接点击导航:

如何生成@font-face需要的各种字体,先把我们刚才下载的字体上传上去:

上传后按下图所示操作:

现在从Font Squirrel下载下来的文件已经保存在你本地的电脑上了,接着解压缩,如下:

里面除了@font-face所需要的字体格式外,还带有一个DEMO文件。

例如在自己的本地创建了一个fontface项目:

在项目中单独创建一个fonts目录,用来放解压出来@font-face所需的字体:

现在@font-face所需字体已经加载到本地项目,现在本地项目中的style.css中附上我们需要的@font-face样式

@font-face {
   font-family:'SingleMaltaRegular';
   src: url('../fonts/singlemalta-webfont.eot');
   src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/singlemalta-webfont.woff') format('woff'),
    url('../fonts/singlemalta-webfont.ttf') format('truetype'),
    url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg');
   font-weight:normal;
   font-style:normal;
}

我们已经通过@font-face自定义好所需的SingleMalta字体,把自己定义的字体应用到你的Web中的DOM元素上:

h2.singleMalta{ font-family:'SingleMaltaRegular'}

效果:

提醒使用者:

1、如果是英文网站,而且Logo,Tags等应用到较多的这种特殊字体效果,我建议你不要使用图片效果,而使用@font-face,但是你是中文网站,我觉得还是使用图片比较合适,因为加载英文字体和图片没有多大区别,但是你加载中文字体,那就不一样了,因为中文字体太大了,这样会影响到项目的某些性能的优化;

2、致命的错误,你在@font-face中定义时,文件路径没有载对;

3、你只定义了@font-face,但并没有应用到你的项目中的DOM元素上;

我给大家提供几个免费字体下载的网址:Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type,不然你点这里将有更多的免费字体。前面几个链接是帮助你获取一些特殊字体,但下面这个作用更大,能帮你生成@font-face所需要的各种字体,这工具就是Font Squirrel

最后在提醒一下,使用@font-face别的可以忘了,但Font Squirrel千万不能忘,因为他能帮你生成@font-face所需的各种字体格式。

生成地址:https://www.fontsquirrel.com/tools/webfont-generator

CSS生成字体@font-face

需要本地有字体文件,如:helvetica-light.otf 通过工具自动生成网页字体,如:http://www.fontsquirrel.com/tools/webfont-generator ...

【ttf 压缩】html网页引用中文字体,文件过大,加载缓慢的解决办法【字蛛】【web font】

【以下有部分内容引用的网络文章】 我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅。面对这种问题...

在CSS中通过@font-face属性来实现网页中嵌入特殊字体

首先获取要使用字体的三种文件格式,确保能在主流浏览器中都能正常显示该字体。 .EOT,适用于Internet Explorer 4.0+ .TTF或.OTF,适用于Firefox 3.5、Safa...
  • perny
  • perny
  • 2014年02月07日 20:15
  • 2301

导入页面字体@font-face

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,IE4已支持语法@font-face { font-fami...

css 使用@font-face 嵌入自定义字体或字体图标方法笔记

通常css使用font-family指定客户端显示字体的样式,本笔记目的在于解决客户端未安装指定字体,导致无法完成设计效果要求。与此同时现在大部分图标使用字体格式,因为它有矢量,体积小等等优点讲解如何...

利用@font-face实现个性化字体

字体转换网站:http://www.fontsquirrel.com/tools/webfont-ge 可以将字体转换为网页兼容格式字体eot,otf,svg,wotf新项目中需要使用:造字工坊悦黑...

web字体格式及几种在线格式转换工具介绍

目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体...

vuejs-折腾系列(一)vue-fontawesome使用

折腾前言目前工作主要使用 vue.js 框架进行开发,自己又对 vue 不是那么了解,还是半桶的状态,所以得加紧步伐赶紧熟悉起来,这两天在使用脚手架 vue-cli 创建项目玩耍中,又一直对font-...
  • gccll
  • gccll
  • 2017年05月18日 10:03
  • 9043

html5自定义字体@font-face

  • 2016年07月28日 12:19
  • 6.13MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:获取@font-face所需字体格式
举报原因:
原因补充:

(最多只允许输入30个字)