• 谷歌字体(Google Font)初探 [翻译自Google官方文档]


    这个指南解释了如何使用Google Font的API,把网络字体添加到自己的页面上。你不需要任何的编码,你所要做的只是添加一个特定的CSS到HTML页面上,然后把字体关联到这个CSS样式。

    一个快速的例子: 

    这是一个例子,复制下面的HTML代码到一个文件中:

    Html代码  收藏代码
    1. <html>  
    2.   <head>  
    3.     <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">  
    4.     <style>  
    5.       body {  
    6.         font-family: 'Tangerine', serif;  
    7.         font-size: 48px;  
    8.       }  
    9.     </style>  
    10.   </head>  
    11.   <body>  
    12.     <h1>Making the Web Beautiful!</h1>  
    13.   </body>  
    14. </html>  

     

    用一个现代浏览器打开这个HTML文件,你就可以看到页面显示如下,用了一个叫做“Tangerine”的字体:

      
     
    那个句子是普通的文本,所以你可以通过使用CSS来改变它的样式。试着在前面的例子中添加一个阴影的样式:

    Html代码  收藏代码
    1. body {  
    2.   font-family: 'Tangerine', serif;  
    3.   font-size: 48px;  
    4.   text-shadow: 4px 4px 4px #aaa;  
    5. }  

    你可以看到,文字下面有阴影了:


     这只是你能用字体API和CSS做东西的一个开始。

    概述: 
    您开始使用Google字体API只需要两个步骤:
    1.添加一个样式表来请求网络字体

    Html代码  收藏代码
    1. <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">  

    2.同样,在一个样式表中定义一个使用所请求的网络字体的节点

    Html代码  收藏代码
    1. CSS selector {  
    2.   font-family: 'Font Name', serif;  
    3. }  

    或者在这个节点上使用内嵌的样式

    Html代码  收藏代码
    1. <div style="font-family: 'Font Name', serif;">Your text</div>  

        注意: 当在CSS样式表中定义一个网络字体时,总是要列出至少一个网络安全的回退字体(fallback web-safe font )用来避免不希望的行为。特别是在列表的最后添加一个CSS默认字体,像名为“serif”或者“sans-serif”的字体。这样的话在必要的时候浏览器可以回退到它的默认字体。


    您可以使用的网络字体一览,可以参见 谷歌字体目录 。


    在样式表的URL中指定字体集和样式: 

    要决定在您的样式表连接中使用什么URL,就需要从谷歌字体API的基本URL开始:

    Html代码  收藏代码
    1. http://fonts.googleapis.com/css  

    然后加入字体集的URL参数,可以使用一个或多个字体集的名字和样式。
    例如,请求 Inconsolata 字体:

    Html代码  收藏代码
    1. http://fonts.googleapis.com/css?family=Inconsolata  

         注意: 要用加号(+)替换字体集名字中的所有空格。

    要请求多个字体集时,要用竖线(|)来隔开名字。
    例如,要请求Tangerine , Inconsolata , 和 Droid Sans 三种字体:

    Html代码  收藏代码
    1. http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans  

     
    请求多种字体,可以允许您在您的页面上使用所有这些字体。(但是您也不要太离谱,大多数页面不需要非常多的字体,而且请求很多字体会使您的页面加载变慢。)
    字体API默认情况下提供了所请求字体的普通版本。要请求其它的样式或大小,在字体的名字后面加一个冒号(:),跟随在后的一系列的样式和大小用逗号(,)分格。
    例如:

    Html代码  收藏代码
    1. http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans  

    要知道提供的字体有哪些大小和样式,需要查询谷歌字体目录 。
    对于您所请求的每一个样式,您既可以提供全名也可以提供缩写,对于大小,您可以另外指定一个数字:

    样式 符号
    斜体 italic 或 i
    粗体 bold 或 b 或者是一个数字,就像700
    粗体 斜体 bolditalic 或 bi


     例如,请求 “Cantarell” 斜体 和 “Droid Serif”粗体,您可以使用下面的任何一个URL:

    Html代码  收藏代码
    1. http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold  

     

    Html代码  收藏代码
    1. http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b  

     

    Html代码  收藏代码
    1. http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700  

     指定脚本的子集:

    一些字体在谷歌字体目录中支持多种脚本(就像拉丁和西里尔),为了指定哪一个子集将被下载,需要在URL后面增加子集参数。

    例如,为Philosopher 字体指定西里尔子集,URL应该写成:

    Html代码  收藏代码
    1. http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic  

     为Philosophe 字体请求拉丁和西里尔子集,URL应该写成:

    Html代码  收藏代码
    1. http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic  

     要得到一个完整的字体和字体子集的列表,请参照谷歌字体目录 。

    以上翻译自Google官方文档,原文连接:http://code.google.com/intl/zh-CN/apis/webfonts/docs/getting_started.html

    虽然官方连接里是zh-CN,但打开还是英文的,自己翻译了一下,翻的很不好。。。。。

  • 相关阅读:
    vue项目中实现定时刷新页面(重新渲染数据实时更新)
    如何撤销 Git commit ?
    error: You have not concluded your merge (MERGE_HEAD exists)
    ajax的前世今生
    DevTools failed to load SourceMap: Could not load content for webpack:///node_modules/sockjs-client/
    Vue 项目如何配置代理解决跨域
    Nginx 到底是什么东西?
    JSON.parse()与JSON.stringify()的区别
    uni-app 中如何管理用户登录状态
    Oracle分析函数简析
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/3929294.html
Copyright © 2020-2023  润新知