网页中内嵌字体

Background

今天在浏览一个网站的时候,发现了一款非常好看的字体,审查元素发现,这个字体叫Open Sans,非常惊艳。和我以前发现的一款字体Segoe UI非常像。对比了一下,其实都很不错,而且很相像。于是Google了下,竟然发现其实这两款字体出自同一人Steve Matteson之手!真是大神级的人物。看来的我的欣赏水平还没有跑偏。

不同的是,Segoe UI属于微软的东西,付费,而Open Sans是免费的。

刚好自己最近在做网站开发,于是就想把这款字体嵌入到自己正在做的网页里。今天就写一下怎么把一款字体嵌入到自己的网页中。

其实在CSS中,使用font-family这个属性就直接可以将网页的字体设置成想要的。但是有个前提是,你所使用的某种特定的字体系列,在网页中是否能显示,完全取决于用户机器上该字体系列是否可用。如果用户机器上没有这种字体,那就会变成默认的字体。

所以,为了保证可以在每一台机器上都能显示,把一款字体嵌进网页是一个不错的选择。当然仅限于西方字体,如果是汉语的话,字体会很庞大,每次加载字体就会浪费用户很长的时间和很多的流量。

字体

首先我们必须在网上下载到自己想要的字体,比如ttf格式的字体。在这里先简单科普一下不同的字体格式。

  • TureTpe(.ttf)格式:

.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+

  • OpenType(.otf)格式:

.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+

  • Web Open Font Format(.woff)格式:

.woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+

  • Embedded Open Type(.eot)格式:

.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+

  • SVG(.svg)格式:

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+

所以这就意味着,我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。

字体转换

在这里给大家推荐一个网站fontsquirrel,可以在线的转换出各种字体,甚至生成一个CSS文件,我们直接就能在代码中使用。我们可以使用它将转换好的字体和CSS文件下载下来。

Code

在css代码中,我们主要使用的是font-face这个属性,它的主要功能就是把自己定义的Web字体嵌入到网页中。

首先我们来看看@font-face的语法规则:

	@font-face {
		font-family: <YourWebFontName>;
		src: <source> [<format>][,<source> [<format>]]*;
		[font-weight: <weight>];
		[font-style: <style>];
	} 其中关于属性的解释(有些可能没有用到)

	font-family:设置文本的字体名称。
	font-style:	设置文本样式。
	font-variant:设置文本是否大小写。
	font-weight:设置文本的粗细。
	font-stretch:设置文本是否横向的拉伸变形。
	font-size:设置文本字体大小。
	src:设置自定义字体的相对路径或者绝对路径,注意,此属性只能在@font-face规则里使用。

我们可以看看fontsquirrel为我们生成的CSS文件内容

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

所以根据这些,我们可以将字体文件放在指定的目录下,然后更改url的地址,对你的字体命名。然后,像正常字体一样去使用它吧。比如

	body {
	  font-family:"open_sansregular"
	}

就可以全局使用这个字体了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

HTML5 & CSS3初学者指南(1) – 编写第一行代码

介绍 网络时代已经到来。现在对人们来说,每天上网冲浪已经成为一种最为常见的行为。 在网页浏览器中输入一段文本地址,就像http://www.codeprojec...

2406
来自专栏较真的前端

HTML 5.2 新特性

1615
来自专栏前端小叙

react-router实现tab页面切换,并解决选中样式首页始终选中问题

1063
来自专栏葡萄城控件技术团队

用css3制作旋转加载动画的几种方法

以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android。最近在开发一...

2676
来自专栏web前端教室

【课堂笔记】先行者 3.0版本的vueJs课程的第三次课

今次是vue课程的第3次课,内容大体上是: 一、事件; 在vue当中,事件是使用v-on指令,它可以定义一个方法来调用。 语法: <input v-on:...

2209
来自专栏互联网杂技

手机网页布局经验总结

引言 众所周知,在当今移动互联网大行其道的现在,基本上所有的年轻人都是使用过手机去浏览一些网站的资讯或者使用过手机去购物网站支付买过东西,但是大家有没有想过这样...

4506
来自专栏企鹅号快讯

5个你可能不知道的CSS属性

每年都有新的CSS属性被标准化,并在主流浏览器中可用。 它们旨在使Web开发人员的工作变得轻松,创造出新颖美丽的网站。 在这篇文章中,我将介绍5个相对较新的CS...

1898
来自专栏向治洪

ConstraintLayout约束控件详解

简介 在Google IO大会中不仅仅带来了Android Studio 2.2预览版,同时带给我们一个依赖约束控件–ConstraintLayout。一种构建...

2995
来自专栏james大数据架构

jquery.mobile手机网页简要

先上最终效果: ? ? ? ? ? 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做...

2367
来自专栏Thinks

10步大幅提升网站可访问性

10步大幅提升网站可访问性。每一步都可以在20分钟内完成。这篇文章也可以在20分钟内看完。 第一步,检查<title></title>,不允许空,不允许过长,简...

681

扫码关注云+社区