码云笔记前端博客
Home > HTML/CSS > Css3 @font-face在实际项目中如何使用

Css3 @font-face在实际项目中如何使用

2018-06-20 分类:HTML/CSS 作者:码云 阅读(1296)

本文共计1499个字,阅读时间预计4分钟,干货满满,记得点赞加收藏哦

@font-face是css3中的一部分内容,它有什么作用呢?主要是用来自定义一些web字体用来嵌入到你的网页中,就比如说码云笔记四个字就是我通过@font-face来自定义的。可以说通过css3出来这一属性后,我们再也不用担心只能使用web安全字体了,你可以根据自己的需要来设定自己任意喜欢的字体,而且能够很好的兼容IE,为了让大家都会用它,我决定把我自己在项目中用的方法和心得整理出来和大家分享。

以码云笔记为例

Css3 @font-face在实际项目中如何使用

这样的字体是不是很让我们感觉特别的新颖了呢,就不用在用UI做一张字体图片上去了。

再和大家介绍css3 @font-face 之前,为大家补充一下基础知识。

一、@font-face的语法规则

1
2
3
4
5
6
7
8
9
10
11
@font-face {

font-family:<yourFontName> ;//定义字体名称

src: <source> [<format>][,<source>[<format>]]*;

[font-weight: <weight>];

[font-style: <style>];

}

属性取值说明:

yourFontName:这个属性值指得是你自己定义的字体名字,当然最好是你下载好的字体,定义好的字体名称也是你要引用到Web元素中的font-family。

Source: 这个是你自定义字体存放的路径,路径没有特殊要求,可以是相对路径也可以是绝对路径。

Format:表示的事你自定义字体的格式,用来帮助浏览器识别,这些格式包含.eot,.woff,.ttf,.svg等字体格式

接下来就是我项目中的应用,首先我们需要在css文件中定义自己的字体,用作页面中使用,Css3@font-face字体代码定义如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@font-face {

font-family: 'jxk';

src: url(fonts/JXK.eot?v=4.1.0);

src:url(fonts/JXK.eot?#iefix)format('embedded-opentype'), url(fonts/JXK.woff?v=4.1.0)format('woff'),

url(fonts/JXK.ttf?v=4.1.0)format('truetype'), url(fonts/JXK.svg#JXK)format('svg');

font-weight: normal;

font-style: normal

}

这里我用的是绝对路径,当然你也可以是相对路径,然后应用到我们需要使用的页面中

1
2
3
4
5
.yusi-mono {

font-family: jxk;

}

页面的效果:

Css3 @font-face在实际项目中如何使用

此时此刻是不是对@font-face很神奇,相信很多童鞋都有点跃跃欲试了,不着急操作,看完文化在那个孩子后大家可以自己试试,说到这儿很多童鞋问了,如何得到自己所需的.eot,.woff,.ttf,.svg字体格式,这需要我们通过第三方的软件来实现,在这里我推荐一个我常用的一个工具fontsquirrel

网址:https://www.fontsquirrel.com/tools/webfont-generator

Css3 @font-face在实际项目中如何使用

到这里我们就成功了,那么关于@font-face打造特殊字体效果到这里就结束了,最后需要告诉大家的是,在实际项目中如果你按照我上面的步骤操作没有效果的话,那肯定是两个原因导致,一个是你在@font-face中定义时,文件路径有错。另一个就是你只定义了@font-face,但却没有应用到你的项目中DOM元素上。

结束语

以上就是码云笔记关于css3的@font-face介绍完了,希望对你有用,也希望大家一起交流学习,搞技术的不动手实践一下怎么能学会呢,有blog的童鞋还不快去应用到你的网站上炫一下。

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(1) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
1

觉得文章有用就打赏一下文章作者

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - Css3 @font-face在实际项目中如何使用

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 471 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 228 条
  • 链接总数: 15 个
  • 标签总数: 1033 个
  • 建站时间: 522 天
  • 访问总量: 8680892 次
  • 最近更新: 2019年11月15日