企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

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

HTML CSS 码云 40℃ 0评论

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

以码云笔记为例

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

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

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

一、@font-face的语法规则

@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字体代码定义如下:

@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

}

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

.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的童鞋还不快去应用到你的网站上炫一下。

转载请注明:码云笔记 » Css3 @font-face在实际项目中如何使用

喜欢 (1)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址