zoukankan      html  css  js  c++  java
  • Google 字体API的基本使用

    一、链接CSS文件直接使用;

    基本上你链接直接在Google.com上的CSS文件。通过网址参数,你可以选择你想要的字体,以及这些字体的变化。

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans">
    body {
    	font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif;
    	font-size: 48px;
    }
    

    二、使用JS加载字体库

    <script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
    <script type="text/javascript">
        WebFont.load({
            google: {
                families: ['Cantarell']
            }
        });
    </script>
    <style type="text/css"> 
        .box{font-family:'Cantarell';}
    </style>
    

    参考:https://css-tricks.com/snippets/css/basics-of-google-font-api/

    demo:

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>Document</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.3/webfont.js"></script>
    		<style>
    		.box{font-family: 'Comfortaa';text-align: center;padding-top: 300px;font-size: 50px;color: #666}
    		</style>
    	</head>
    	<body>
    		<div class="box">This ia Webfont demo</div>
    		<script>
    		WebFont.load({
    			google: {
    				families: ['Comfortaa:latin', 'Rosario:latin']
    			}
    		});
    		</script>
    	</body>
    </html>
  • 相关阅读:
    Maven入门指南12:将项目发布到私服
    Groovy学习:第四章 Groovy特性深入
    jQuery部分疑问及小结
    Windows自动化---模拟鼠标键盘
    适配器
    object都有string
    spinner
    context
    OnclickListener
    学习-----领进门,看个人
  • 原文地址:https://www.cnblogs.com/jone-chen/p/5937996.html
Copyright © 2011-2022 走看看