简介:
有些网站打开非常慢,一个值得关注的原因是:包含国外网站的东东,包括字体、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
实例详见: