css中使用font-face改变字体即加载外部字体的方法

发布时间:2021-07-26 13:40:30 作者:chen
来源:亿速云 阅读:128

这篇文章主要介绍“css中使用font-face改变字体即加载外部字体的方法”,在日常操作中,相信很多人在css中使用font-face改变字体即加载外部字体的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css中使用font-face改变字体即加载外部字体的方法”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!


代码如下:


<!DOCTYPE HTML>
<meta charset="UTF-8">
<head>
<script src="jquery-1.8.2.min.js"></script>
<style>
#gmap,#controls {
width:300px;
height:300px;
}
@font-face {
font-family: Lovelo-Black;/&times;定义font的名字&times;/
src: url('font/Lovelo Black.otf');/*把下载的字体文件引入进来&times;/
}
@font-face {
font-family: Lovelo;
src: url('font/Lovelo Line Bold.otf');
}
@font-face {
font-family: HYPED;
src: url('font/HYPED_Font.otf');
}
div.a {
font-family: Lovelo-Black, sans-serif;
font-size:24px;
}
div.b {
font-family: Lovelo, sans-serif;
font-size:24px;
}
div.c {
font-family: HYPED, sans-serif;
font-size:24px;
color:yellow;
}
body {
background-color:rgb(216, 216, 216);
}
</style>
<script>
</script>
</head>
<body class="sapUiBody">
<div class="a">Hello World 123456</div>
<div class="b">Hello World 123456</div>
<div class="c">Hello World 123456</div>
</body>

到此,关于“css中使用font-face改变字体即加载外部字体的方法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. CSS引入外部字体
  2. CSS引用外部ttf字体的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:java如何从服务器下载文件并保存到本地

下一篇:element-ui表格如何实现单元格可编辑

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》