html中如何应用google web fonts - fun - fun

html中如何应用google web fonts

abelard posted @ 2011年2月20日 09:49 in 杂坛 , 3376 阅读

今天看了http://garfileo.is-programmer.com中的字体特别漂亮,后来咨询了blog的主人,于是借用了一下,如想更新这些字体,是这么做的,在

http://www.google.com/webfonts/preview#font-family=Covered+By+Your+Grace

的左侧选择设置,右边就会出效果,然后将右侧的

http://fonts.googleapis.com/css?family=Covered+By+Your+Grace:regular

粘到地址栏,回车得到

@font-face {
  font-family: 'Covered By Your Grace';
  font-style: normal;
  font-weight: normal;
  src: local('Covered By Your Grace'), local('CoveredByYourGrace'), url('http://themes.googleusercontent.com/font?kit=6ozZp4BPlrbDRWPe3EBGA8Swx7O1nRJXGXrmuE0DD7s') format('truetype');
}

如果想将网页html文件的h1设置成该字体的话,在将上面的内容粘到css文件中,并且将

http://www.google.com/webfonts/preview#font-family=Covered+By+Your+Grace

网页右侧下方的这些内容

  font-family: 'Covered By Your Grace', serif;
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  text-shadow: 2px 2px 2px #aaa;
  text-decoration: none;
  text-transform: capitalize;
  letter-spacing: 0em;
  word-spacing: 0em;
  line-height: 1.2;

放在css的h1设置项中如下

h2 {  font-family: 'Covered By Your Grace', serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
  text-shadow: 2px 2px 2px #aaa;
  text-decoration: none;
  text-transform: capitalize;
  letter-spacing: 0em;
  word-spacing: 0em;
  line-height: 1.2;}

 

Avatar_small
IWRose 说:
2011年2月20日 11:27

没有中文字体是遗憾。

Avatar_small
Rajasthan Board 5th 说:
2022年8月21日 19:00

Rajasthan Board Model Paper 2023 Class 5 Pdf Download with Answers for Rajasthani Medium, English Medium, Hindi Medium, Urdu Medium & Students for Small Answers, Long Answer, Very Long Answer Questions, and Essay Type Questions to Term1 & Term2 Exams at official website. Rajasthan Board 5th Class Model Paper New Exam Scheme or Question Pattern for Sammittive Assignment Exams (SA1 & SA2): Very Long Answer (VLA), Long Answer (LA), Small Answer (SA), Very Small Answer (VSA), Single Answer, Multiple Choice and etc.


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter
Host by is-Programmer.com | Power by Chito 1.3.3 beta | © 2007 LinuxGem | Design by Matthew "Agent Spork" McGee