技术帮
 

使用自定义字体

本网站内容基本都是原创作品,未得到作者同意也欢迎转载
转载请注明出处:技术帮
说你呢,赶紧长按二维码,然后点击识别图中二维码

任何技术难题可进QQ群提问:【小崔说编程
对于提问的原则是:没有你不能问的,只有我不会答的

1472955908895017376.png说两句


做前端的都知道,Web页面的字体就那么几种,尤其中文更是少,而且中文字体还难看,要想做出漂亮的页面,字体是不可缺少的,这就是为什么外国网站普遍比中国网站漂亮的一个因素,毕竟,乔布斯生在美国,当年他上大学也没学什么东西,就学了一点儿英文书法,这点儿技能在后来的苹果系列产品中得到了淋漓尽致的发挥,君不见苹果系列产品就一个字儿——漂亮。


本文介绍如何将自定义的字体加入到自己的网站中。


说是自定义字体,当然不是自己设计一套字体,肯定是通过百度等手段找到一些漂亮的字体,然后下载下来使用。


1473058358717068189.png woff字体

Web开放字体格式(Web Open Font Format,简称WOFF)[1]  是一种网页所采用的字体格式标准。此字体格式发展于2009年,现在正由万维网联盟的Web字体工作小组标准化,以求成为推荐标准。此字体格式不但能够有效利用压缩来减少档案大小,并且不包含加密也不受DRM(数位著作权管理)限制。

首先下载woff字体,如果找不到,可以从字体之家下载OpenSans字体

在css文件中加入以下代码。

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(../font/open-sans-light.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(../font/open-sans-normal.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../font/open-sans-bold.woff) format('woff');
}

注意url地址书写正确。

接下来就可以使用font-family:'Open Sans';使用该字体了。