Google字体API使用简单示例
一、前面的话
Google总会做些造福大众的事情,例如提供了web在线字体的API,这玩意其实去年就有了,但是字体种类手指头+脚趾头就可以数出来。but 最近,貌似Google对字体API进行了升级,可使用的在线web字体已经奔向200去了。
对于设计者而言,可谓不得不高兴的事情。这里,通过简单的例子,讲讲如何使用这些字体API。
二、寻找这些字体
首先,进入这个页面:http://www.google.com/webfonts/v2,如果你是首次进入,您会看到类型下图效果的页面:
如果您使用的是具有考古价值的IE浏览器,抱歉,你看到的会是下面模样的页面,
如果你使用靠谱的浏览器,则选择进入后会看到下面这样子的界面,其功能如下图标注:
三、给web页面添加单个字体
如果你只想给页面添加一个字体,其实可以告别上面一堆按钮啊什么的,直接参照下面的方法使用就可以了。
例如,你想要添加一个名叫'Yanone Kaffeesatz'
的字体,直接在页面的头部加入这么一行代码就可以了:
<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css" />
然后响应的CSS代码如下:
body{font-family:'Yanone Kaffeesatz';}
然后页面的英文字体就长得奇形怪状了,如下图所示:
很简单的。
细心而聪明的你可能已经看出的字体使用的规则:首先头部调用Google的字体API CSS文件,统一的,?family=
后面跟着的就是你希望添加的字体名称(中间的空格以+
号代替),然后,就可以从容地使用该字体了,包括CSS3的文字投影效果。
所以,如果你对Google 字体API页面上哪个字体感兴趣的话,例如这里的'Give You Glory'
字体。
直接如下代码就OK的啦:
<link href="http://fonts.googleapis.com/css?family=Give+You+Glory" rel="stylesheet" type="text/css" />
body{font-family:'Give You Glory';}
对于单个字体,我做了个demo页面,您可以狠狠地点击这里:Google字体API使用demo 1
在现代浏览器下(IE浏览器因为某些原因会崩掉),切换下拉框的字体,会看到页面字体跟着变化。
四、给web页面添加多个字体
如果你的页面需要引用多个字体,则显然使用自动生成的方法更简单些,举个例子,如下操作:
①选择你想要添加的字体:
②点击页面下部搜藏条上的use按钮
③第一屏是效果,滚动滚动条,你就可以看到外链的API代码了:
然后,把上面框框中的代码拷贝到页面头部,你就可以使用你所收藏的N个字体了哈。也算相当简单的啦。效果啊什么的,这里就不展示了,因为今天我生日,晚上有约会,没事情耗了,不好意思啦。
五、最后的话
目前只支持英文的些字体,至于中文,我个人觉得蛮悬。主要原因之一就是大小的问题,英文只需要兼顾26个英文字母,数字和一些字符就可以了,但是汉字却有千千万万(表示多),动不动一个字体就几兆,这页面光加载一个字体就好去十几秒(目前速度),实在不能放在商业站点上。目前靠谱的做法就是只放置部分字体,如网站logo上面的文字之类,这样,字体大小小了,自然也就让其在web上大规模应用成为了可能,只是,不知有没有这一天。
恩,就这些。希望本文的唠叨能够对您的学习有所帮助,欢迎帮忙纠正文中表述不准确的地方。
感谢阅读!
Google字体API使用简单示例的更多相关文章
- demo工程的清单文件及activity中api代码简单示例
第一步注册一个账户,并创建一个应用.获取app ID与 app Key. 第二步下载sdk 第三步新建工程,修改清单文件,导入相关的sdk文件及调用相应的api搞定. 3.1 修改清单文件,主要是加入 ...
- ZooKeeper(3.4.5) - 原生 API 的简单示例
一.创建会话 1. 创建一个基本的ZooKeeper会话实例 package com.huey.dream.demo; import java.util.concurrent.CountDownLat ...
- Google 字体API的基本使用
一.链接CSS文件直接使用: 基本上你链接直接在Google.com上的CSS文件.通过网址参数,你可以选择你想要的字体,以及这些字体的变化. <link rel="styleshee ...
- google地图API的简单使用
<div id="contact_container" style="width:700px;height:600px;"></div> ...
- ASP.NET Web API 的简单示例
Demo1: HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- Google Map API 应用实例说明
目录 Google Map API 1基础知识 1.1 Google 地图 API 概念 1.2 Google 地图的"Hello, World" 1.2.1 加载 Google ...
- 【Redis】三、Redis安装及简单示例
(四)Redis安装及使用 Redis的安装比较简单,仍然和大多数的Apache开源软件一样,只需要下载,解压,配置环境变量即可.具体安装过程参考:菜鸟教程Redis安装. 安装完成后,通过r ...
- Web API 简单示例
一.RESTful和Web API Representational State Transfer (REST) is a software architecture style consisting ...
- Google Chart API 参考 中文版
Google Chart API 参考 中文版 文档信息 翻译: Cloudream ,最后修改:02/22/2008 06:11:08 英文版版权归 Google , 转载此中文版必须以链接形式注明 ...
随机推荐
- 不用typsescript也能使用类型增强功能
由于 JS 的弱类型.宽松的编写规范.以及开发工具的弱鸡支持,我们在维护前人的代码时,经常会出现不知道某一个方法或字段命名来自于哪里,一定要在全局搜索以后慢慢筛查才能找到 同样我们在使用接口返回的对象 ...
- 通达OA 前台任意用户登录漏洞复现
漏洞描述 通达OA是一套办公系统.通达OA官方于4月17日发布安全更新.经分析,在该次安全更新中修复了包括任意用户登录在内的高危漏洞.攻击者通过构造恶意请求,可以直接绕过登录验证逻辑,伪装为系统管理身 ...
- 项目实战:Qt+C#轨道交通行业高性能高流畅度模拟火车移动图像控件
需求 高清线阵相机扫描火车并自动切割单节车厢完成图像合成.通过视频图像处理组件流畅模拟火车行驶整个过程的视频图像: 1.模拟火车通过时的滚动图像,图像主要以两侧和顶部图像的预览为主; 2.模拟 ...
- 《逆向工程核心原理》——IAThook
hook逻辑写入dll中,注入dll. #include "pch.h" #include <tchar.h> #include "windows.h&quo ...
- 《C++反汇编与逆向分析技术揭秘》--数据类型
浮点数类型 IEEE标准从逻辑上采用一个三元组{S, E, M}来表示一个数N,它规定基数为2,符号位S用0和1分别表示正和负,尾数M用原码表示,阶码E用移码表示.根据浮点数的规格化方法,尾数域的 ...
- 攻防世界 reverse hackme
hackme XCTF 3rd-GCTF-2017 __int64 __fastcall sub_400F8E(__int64 a1, __int64 a2) { char input[136]; / ...
- 攻防世界 resver catch-me
catch-me asis-ctf-quals-2016 附件给了个压缩包文件,重命名,解压,获取到elf文件 程序有两处关键比较 第一处: 这里进行动态调试,得到v3=0xB11924E1, byt ...
- 【linux】驱动-6-总线-设备-驱动
目录 前言 6. 总线-设备-驱动 6.1 概念 6.2 工作原理 6.3 总线 6.3.1 总线介绍 6.3.2 注册总线 6.4 设备 6.4.1 设备介绍 6.4.2 设备注册.注销 6.5 驱 ...
- 北航OO第四单元作业总结(4.1~4.3)及课程总结
前言 在学习过JML规格描述语言之后,本单元进行了UML(Unified Modeling Language)的学习.和JML单纯用语言描述的形式不同,UML通过可视化的图形形式,对一系列有关类的元素 ...
- 2020 OO 第三单元总结 JML语言
title: 2020 OO 第三单元总结 date: 2020-05-21 10:10:06 tags: OO categories: 学习 第三单元终于结束了,这是我目前为止最惨的一单元,第十次作 ...