简介:
有些网站打开非常慢,一个值得关注的原因是:包含国外网站的东东,包括字体、CSS、JS... 如何解决字体问题呢?
比如下面的实例
源代码:
<head>
<title>Title</title>
<meta charset="utf-8">
<style>
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
body { font-family: 'Droid Serif'; }
h1, h2, h3 { font-family: 'Yanone Kaffeesatz'; font-weight: normal; }
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
</head>
改后的代码:
<head>
<title>Title</title>
<style>
@import url(../style/font.css);
@import url(../style/main.css);
body { font-family: "Open Sans"; }
h1, h2, h3 {
font-family: 'Yanone Kaffeesatz';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: Consolas; }
</style>
</head>
font.css 内容:
@font-face {
font-family: 'Yanone Kaffeesatz';
font-style: normal;
font-weight: 400;
src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(../fonts/YK.ttf) format('truetype');
}
@font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: 400;
src: local('Droid Serif'), local('DroidSerif'), url(../fonts/Droid.ttf) format('truetype');
}
@font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: 700;
src: local('Droid Serif Bold'), local('DroidSerif-Bold'), url(../fonts/Droid_bold.ttf) format('truetype');
}
下载字体:
放的位置为 ../fonts/YK.ttf
实例详见:
