HTML+CSS编写静态网站-23 如何调用外部字体
来源:互联网 发布:淘宝导出买家联系方式 编辑:程序博客网 时间:2024/06/06 00:26
视频教程观看地址:http://study.163.com/course/courseMain.htm?courseId=1003879015这节课,我们来把外部字体包含进来。众所周知,最全最强大的第三方字体服务是Google字体,所以我们来到https://fonts.google.com/。实际上有许多字体服务,为什么选择Google呢,因为它是完全免费的,所有的字体都是合法的,拥有授权的许可,而且非常可靠。这里你可以继续浏览这里的选择,找到你最喜欢的字体。那么,我喜欢Changa One字体,所以输入Changa One:然后我们点击进去,然后SELECT THIS FONT。然后有另一种字体,叫做Open Sans,我们搜索Open Sans,再次SELECT THIS FONT。我们已经选择了两种字体,现在,我准备在我的网站中使用它们。所以我点击底部的这个按钮:它会弹出一个对话框,所以,我切换到customize,选择正常的400和斜体,然后700加粗,和700加粗斜体以及800特粗。现在,让我们切换回EMBED,然后,将这段HTML代码复制:然后我们回到我们的代码。来到index.html,你可能已经注意到,我们复制的代码看起来非常类似于我们自己创建的链接元素。这是因为Google实际上为我们提供了一个CSS文件,其中包括我们刚刚选择的字体。现在,非常重要的是,我们需要把这个html代码粘贴到normalize.css下面: <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet"><link rel="stylesheet" href="css/main.css">所以让我们保存,然后进入main.css,然后来到logo的下面,输入h1,使用font family属性将字体应用到第一级标题。所以我们说font-family,我们需要使用单引号,并说Changa One,它是字体的名称,然后输入一个逗号,接着sans-serif,以分号结束。#logo{text-align:center;margin:0;} h1 { font-family: 'Changa One', sans-serif;}这里,我们把字体的名字放在单引号里面,后面跟的是字体的格式,这里我们输入的是无衬线字体。事实上,Google会在这里告诉你该怎么做:现在,让我们保存我们的CSS文件,并刷新看看这是什么样子。正如你可以看到,现在,这种字体已经应用于我的第一级标题。接下来,让我们设置一下h1字体的大小,并添加其余的样式。所以,并设置一个15像素上下和0像素左右的边距。然后设置字体大小为1.75em这里的em是一个新的单位:h1 {font-family: 'Changa One', sans-serif; margin: 15px 0; font-size:1.75em;}1em等效于当前浏览器默认字体大小,在大多数浏览器中默认设置为16像素。因此,em基本上是相对于16像素的字体大小。这意味着默认情况下,一个em是16像素的字体大小。在这种情况下,我们将第一级标题设置为1.75的大小。就是28个像素大小。这里为什么不使用像素单位呢,因为像素时绝对的,em是相对的。更加灵活。让我们保存并刷新页面看看是什么样子。你看,是不是更漂亮了。更多精彩内容尽在视频中!本文固定链接:http://www.oxox.work/web/html-css/external-font/ | 虚幻大学
查看原文:http://www.oxox.work/web/html-css/external-font/
阅读全文
0 0
- HTML+CSS编写静态网站-23 如何调用外部字体
- HTML+CSS编写静态网站-13 包含外部css样式
- HTML+CSS编写静态网站-43 如何修复bug
- HTML+CSS编写静态网站-44 如何进一步学习
- HTML+CSS编写静态网站-03 添加css样式
- HTML+CSS编写静态网站-15 什么是CSS
- HTML+CSS编写静态网站-20 CSS颜色属性详解
- HTML+CSS编写静态网站-05 HTML的含义
- HTML+CSS编写静态网站-18 开发手机网站
- HTML+CSS编写静态网站-41 上传网站到Github
- HTML+CSS编写静态网站-14 课后作业03
- HTML+CSS编写静态网站-16 使用div
- HTML+CSS编写静态网站-01 课程简介
- HTML+CSS编写静态网站-02 开发环境的搭建
- HTML+CSS编写静态网站-04 课后作业01
- HTML+CSS编写静态网站-06 创建基础结构
- HTML+CSS编写静态网站-08 课后作业02
- HTML+CSS编写静态网站-09 导航元素
- C++ 日期计算器
- Package java.util.stream
- Android Phone Pad UI设计主流分辨率
- (2)Java复习冒泡,选择,插入排序算法
- 开闭原则
- HTML+CSS编写静态网站-23 如何调用外部字体
- hibernate延迟加载(get和load的区别)
- 计算机网络基本概念
- Web前端学习(5)_DOM编程
- RFC说明
- 创建随机长度链表并显示
- RFC20 用于网络交换的ASCII格式
- mysql 分表 分区
- 虚拟机虚拟网卡断网问题排查处理