网页使用Google Font API（字体）的方法

在网页设计里，字体的显示是个问题。最普遍用的是宋体，但是宋体在 Win 7 下的表现真的很难看。雅黑端庄一些，但是随着字体大小，感觉汉字的大小也会有区别。小站现在用的字体是是宋体 + Arial/Georgia，因为习惯了也没多在意，其实对于英文字体有其它更好的选择。
比如 Bitter 字体，用来做标题倒是不错：


代码如下:

<div style="text-align:center; font-size:24px; font-family:Bitter;">Welcome To NowaMagic.net</div>

CSS 怎么调用 Bitter 字体？


代码如下:

@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  src: local('Bitter-Regular'), url(http://themes.googleusercontent.com/static/fonts/bitter/v4/s9gJB935qk_YG8d-lnTdvA.woff) format('woff');
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  src: local('Bitter-Bold'), url(http://themes.googleusercontent.com/static/fonts/bitter/v4/JGVZEP92dXgoQBG1CnQcfD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

其实，这是 Google 推出的Google Font Directory和Google Font API两项服务，Google联合了众多的字体设计者为用户提供了多种漂亮的字体。具体可以参看以前写的一篇文章：《用Google Font API来丰富网页字体》。
这里仅仅抛砖引玉，国内实在太少网站用 Google Font API 了。

赞 (0)

相关推荐

  • 网页使用Google Font API（字体）的方法

    在网页设计里,字体的显示是个问题.最普遍用的是宋体,但是宋体在 Win 7 下的表现真的很难看.雅黑端庄一些,但是随着字体大小,感觉汉字的大小也会有区别.小站现在用的字体是是宋体 + Arial/Georgia,因为习惯了也没多在意,其实对于英文字体有其它更好的选择.比如 Bitter 字体,用来做标题倒是不错: 复制代码 代码如下: <div style="text-align:center; font-size:24px; font-family:Bitter;">We

  • PHP访问Google Search API的方法

    本文实例讲述了PHP访问Google Search API的方法.分享给大家供大家参考.具体如下: 这段代码段演示了如何从php向AJAX搜索API发送请求.请注意,此示例假定使用 PHP 5.2.对于较早安装的 PHP,请参考对应的官方注释. 具体代码如下: 复制代码 代码如下: $url = "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Paris%20Hilton";   // sendReque

  • js给网页加上背景音乐及选择音效的方法

    本文实例讲述了js给网页加上背景音乐及选择音效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <HTML> <HEAD> <TITLE>给网页加上背景音乐,选择音效功能</TITLE> <STYLE> <!--样式单 --> a{font-size:30pt;color:blue;font-family:Vineta BT} a:link{text-decoration:none;} a:hover{text-

  • 使用httpclient实现免费的google翻译api

    由於Google translate API要收錢 ,因此想了一個偷機的方法 1. 用HttpClient發送一個request給http://translate.google.com 2. 再用Jsoup來parse html, 並取出翻譯後的文字 复制代码 代码如下: /** * Copyright (c) blackbear, Inc All Rights Reserved. */package org.bb.util.i18n; import java.io.InputStream;im

  • js+html5获取用户地理位置信息并在Google地图上显示的方法

    本文实例讲述了js+html5获取用户地理位置信息并在Google地图上显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <p id="demo">Click the button to get your position:</p> <button onclick="getLocation()">Try It</button&

  • Python基于pygame实现的font游戏字体(附源码)

    Python基于pygame实现的font游戏字体(附源码)

    本文实例讲述了Python基于pygame实现的font游戏字体.分享给大家供大家参考,具体如下: 在pygame游戏开发中,一个友好的UI中,漂亮的字体是少不了的 今天就给大伙带来有关pygame中字体的一些介绍说明 首先我们得判断一下我们的pygame中有没有font这个模块 复制代码 代码如下: if not pygame.font: print('Warning, fonts disabled') 如果有的话才可以进行接下来的操作:-) 我们可以这样使用pygame中的字体: 复制代码

  • C#实现缩放字体的方法

    本文实例讲述了C#实现缩放字体的方法.分享给大家供大家参考.具体实现方法如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; using System.Drawing.Drawing2D; namespace adv

  • JS实现网页表格自动变大缩小的方法

    本文实例讲述了JS实现网页表格自动变大缩小的方法.分享给大家供大家参考.具体分析如下: 这就是一个个性的动态表格效果代码,网页中的表格自动放大或者缩小,不停的变化 主要就是一个强调显示的作用 复制代码 代码如下: <HTML> <HEAD> <TITLE>js会动的表格</TITLE> <META content="text/html; charset=hz-gb-2312" http-equiv=Content-Type>

  • JavaScript控制网页层收起和展开效果的方法

    本文实例讲述了JavaScript控制网页层收起和展开效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="pragma" content=&q

  • Google Map Api和GOOGLE Search Api整合实现代码

    Google Map Api和GOOGLE Search Api整合实现代码

    将GOOGLE MAP API 和 GOOGLE Search API 进行整合,我用面向对象的方式写了一个类,通过传一个经纬度进去,自动通过GOOGLE LOCAL SEARCH获取附近的相关信息.比如餐厅.景点等,反过来标到地图上,并可在任意容器内显示. 下面是源码: 复制代码 代码如下: /* *Author:karry *Version:1.0 *Time:2008-12-01 *KMapSearch 类 *把GOOGLE MAP 和LocalSearch结合.只需要传入MAP\经纬度值

随机推荐