CSS3文字与字体嵌入字体@font-face，十天精通CSS3教程-慕课网

CSS3文字与字体嵌入字体@font-face

@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。

语法：

@font-face {
    font-family : 字体名称;
    src : 字体文件在服务器上的相对或绝对路径;
}

这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。

比如：

p {
    font-size :12px;
    font-family : "My Font";
    /*必须项，设置@font-face中font-family同样的值*/
}

任务

在右侧代码编辑器窗口的第7行，输入正确内容使文字显示正确的字体。

?不会了怎么办: @font-face是否拼写正确？

问答
评论
笔记
代码

全部精华我要发布

Url(网址)与直接写网址，有什么区别？

已采纳回答 / EddiePeng_

url的名称叫统一资源定位符，网址就是url的俗称。网址等于url ，没有区别。

1 回答 2548 浏览

2019-07-18

字体文件，每种字体都有一个文件吗？这些字体与Microsoft-word文档中的字体属于同一类吗？

已采纳回答 / Imperial_

字体文件的格式一般是: eot otf fon font ttf ttc woff woff2 可以到C:\WINDOWS\Fonts 这个文件夹中查看系统已安装的字体文件。word文档中的字体有些是下载到本地的，有些是本地没有的

1 回答 1069 浏览

2019-06-20

/必须项，设置@font-face中font-family同样的值/

最赞回答 / qq_大盒子精_0

@font-face相当于在创建一个新字体，你必须给它取个名字，就是font-family：xxx,如果你在哪个标签中需要用到这种字体，标签中的font-family：也要设置成xxx,这样才能使用

3 回答 1910 浏览

2019-08-27

这个字体加载后会被安装在本地吗？

最新回答 / edgex

这字体文件最好做缓存

2 回答 1225 浏览

2018-07-18

还有刚刚我把代码复制走了放到我本地，

最新回答 / Zzmkiv

应该是资源没请求到<...图片...>我本地的

5 回答 1271 浏览

2017-09-11

我刚下载的字体是ttf后缀的

最新回答 / qq_龙先生_0

大写的？改为小写试试

1 回答 999 浏览

2017-04-25

字体的路径

已采纳回答 / 懵萌酱

在CSS样式里面写@font-face{ font-family:my font(自己取） src:字体路径}后面设置字体时要和你自己取的字体名称相同，如p{font-family:my font}

3 回答 1392 浏览

2017-02-14

为什么路径引入不起作用

最赞回答 / 慕用3285105

因为路径慕课网给错了，应该是https

4 回答 1075 浏览

2018-10-08

为什么我设置的字体不起作用？

最新回答 / 慕用3285105

可能是你的路径问题，用的是https，可能你打成了http

2 回答 1356 浏览

2018-07-15

为什么我复制源码到webstorm下就显示不了字体

已采纳回答 / Frank_Yuan

一样，我把字体下到本来来就行了。具体原因我也不清楚，可能是服务器的事

3 回答 1854 浏览

2016-08-23

这src怎么来的？

最新回答 / qq_Jabo

"http://fonts.googleapis.com/css?family=Yesteryear"

1 回答 767 浏览

2016-08-23

@font-face 是写在CSS前面的还是没写一个CSS就写一个@font-face

已采纳回答 / Zero_index

一次就可以了。可以把它当成一个html里面唯一的一个元素。类似<html>和<body>这种

3 回答 1579 浏览

2016-08-23

谢谢你的回答~我查了一下，可以是别的字体~说到浏览器对@font-face的兼容问题，这里涉及到一个字体format的问题，因为不同的浏览器对字体格式支持是不一致的，这样大家有必要了解一下，各种版本的浏览器支持什么样的字体，前面也简单带到了有关字体的几种格式，下面我就分别说一下这个问题，让大家心里有一个概念：一、TureTpe(.ttf)格式：.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+...

2 回答 7279 浏览

2016-08-23

@font-face设置多个字体

最新回答 / 西市路1号

不能给一个文字设置多个字体吧。但可以设置多个不同类型的字体文件，因为不同类型的浏览器可能支持的字体文件不同。像这样：@font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot?') format('eot');/*IE*/ src:url('YourWebFontName.woff') format('woff'), url('YourWeb...

2 回答 4292 浏览

2016-08-23

请问font-face中字体文件是什么类型的文件，这文件自己写的，还是从网上或者其他地方下的

已采纳回答 / dijia

这个可以从两方面得到：一个是本地系统已有的字体文件，例如windows中，在C:\Windows\Fonts目录下即可找到*.ttf字体文件；一类是引用存在于网上某一服务器下的字体文件。详细可参考如下链接:http://jingyan.baidu.com/article/e4d08ffdb27d080fd2f60da6.htmlhttp://jingyan.baidu.com/article/6d704a13fbe61828db51cab2.html

2 回答 1399 浏览

2021-01-21

全部我要发布

最热最新

只看我的

4-2 CSS3文字与字体嵌入字体@font-face