通过css加载外部自定义文字

最新推荐文章于 2024-11-02 23:02:00 发布

笨-大叔

最新推荐文章于 2024-11-02 23:02:00 发布

阅读量720

点赞数 1

分类专栏： CSS CSS3 文章标签： web前端开发 css 加载外部文字

本文链接：https://blog.csdn.net/u014703834/article/details/38087757

版权

CSS 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS3

2 篇文章 0 订阅

订阅专栏

很多时候，我们希望自己的页面上出现比较个性的字体，但是这种字体并不是系统上默认自带的，以前的做法是通过加载图片来达到效果，但是这一做法的缺点是，不灵活，不利于后期更改维护。且如果特殊字体过多的话，便会造成加载速度过慢的现象。解决这一问题的办法是，通过CSS来加载外部字体。一下是我的代码，如果有不同或者更好的建议，期待着和你的交流探讨。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>fontDemo</title>
		<meta name="author" content="Administrator" />
		<!-- Date: 2014-07-24 -->
		<style type="text/css">
			body {background:#dff5b7; }
		@font-face{
			font-family:'login';/*文字的名字*/
			src:url('font/bb2780.eot');/*文字文件所在的位置*/
			src:local('login Regular'),
			local('login'),
			url('font/bb2780.woff')format('woff'),
			url('font/bb2780.ttf')format('truetype'),
			url('font/bb2780.svg')format('svg'),
			url('font/bb2780.otf')format('otf');
			}
		h1{font-family: login;font-size: 50px;text-align:center;}
		</style>
	</head>
	<body>
		<h1>I love you</h1>
	</body>
</html>

其中：

.TTF或.OTF，适用于Firefox 、Safari、Opera

.EOT，适用于Internet Explorer4.0+

.SVG，适用于Chrome、IPhone

.WOFF 知用于Chrome、Firefox

效果如图：