脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > css3 > CSS3引入自定义字体font-face

CSS3中引入多种自定义字体font-face

  发布时间：2020-06-12 15:44:16   作者：穆雄雄   我要评论
这篇文章主要介绍了CSS3中引入多种自定义字体font-face,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

今天在HTML中发现了一个问题，提供给我们默认的字体有很多，但是除了那些“黑体”、“宋体”、“楷体”等支持中文字体之外，其余的都不知道中文字体，如果我们需要用自己喜欢的字体怎么办呢？CSS3中是否可以引入自定义下载的字体呢？如果可以我们应该怎么引入？带着这一系列的问题我们来看下解决方案,说什么都不如看效果，下面是三种字体在网页中的效果，“春联标准字体”、“江南艺术调字体”和“毛浙东艺术字体”的效果：

谷歌浏览器：

火狐浏览器：

以上就是效果展示，大家有个了解就可以了！
接着我们看下怎么在CSS中引入：

首先我们要引入某个字体，就应该有这么个字体，（用户不需要有），下载字体放到项目的font文件夹下面

字体下载大家在网上自行下载，也可以在这里下载，下载完成之后我们就来引入字体

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体文件测试</title>
	</head>
	<body>
		<div class="chunlian">春联标准字体测试</div>
		<div class="jiangnan">江南艺术调字体测试</div>
		<div class="maozedong"> 毛泽东字体测试</div>
	</body>
</html>

然后就是CSS样式设置：

<style type="text/css">
			@font-face {
				font-family:'chunlian';
				src: url(font/chunlian.ttf);
			}
			@font-face {
				font-family: 'jiangnan';
				src:url(font/jiangnan.ttf);
			}
			.chunlian{
				font-family: 'chunlian';
				font-size: 50px;
				text-shadow: none;
			}
			.jiangnan{
				font-family: 'jiangnan';
				font-size: 40px;
			}
			@font-face {
				font-family: 'maozedong';
				src:url(font/maozedong.ttf);
			}
			.maozedong{
				font-family: 'maozedong';
				font-size: 50px;
				text-shadow: none;
			}
		</style>

如果再加入其他字体直接在CSS中写@font-face即可！

到此这篇关于CSS3中引入多种自定义字体font-face的文章就介绍到这了,更多相关CSS3引入自定义字体font-face内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

相关文章

  • css中引入指定字体@font-face兼容各浏览器的问题

    这篇文章主要介绍了css中引入指定字体@font-face兼容各浏览器的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-04-08

  • 深入理解CSS @font-face性能优化

    这篇文章主要介绍了深入理解CSS @font-face性能优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-06

  • 详解如何在css中引入自定义字体(font-face)

    本篇文章主要介绍了详解如何在css中引入自定义字体(font-face)，能将自定义的字体添加到网页中，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看
    2018-05-17

  • 使用CSS3的font-face字体嵌入样式的方法讲解

    CSS3中的font-face可以将我们上传的自定义的字体显示出来,有时比如我们要显示英文音标的字体时便需要用到,本文就整理了一下使用CSS3的font-face字体嵌入样式的方法讲解,需
    2016-05-13

  • CSS3 @font-face属性使用指南

    本文介绍了css3的属性@font-face的使用方法，以及在@fant-face中使用字体化图标，有相同需求的小伙伴，自己参考下。
    2014-12-12

  • css3 自定义字体font-face使用介绍

    这篇文章主要介绍了css3 自定义字体font-face使用，需要的朋友可以参考下
    2014-05-14

  • 使用font-face改变字体即加载外部字体

    喜欢网页布局的朋友对font-face并不陌生吧，使其可以改变网页字体，下面有个不错的示例，大家可以参考下
    2014-02-10

  • CSS3用@font-face实现自定义英文字体

    传说中的CSS3基本上什么都可以，那么CSS3中可不可以自定义英文字体呢?答案是非常可以。用@font-face即可实现自定义英文字体，下面有个不错的示例，感兴趣的朋友可以了解下
    2013-09-23

  • @Font-face的基本用法及让全部浏览器都兼容的方法

    @font-face 是一个css2的一个语法，它允许你在网页上显示一个自定义的字体，下面为大家介绍下@font-face的基本用法，以及在所有浏览器都能使用的方法，感兴趣的朋友可以参
    2013-07-04

  • 用@font-face实现网页特殊字符(制作自定义字体)

    用css来实现三角箭头，虽然达到需要的效果了，但还是有一些问题，比如依旧需要靠position来定位箭头的位置,目前也只能实现三角箭头，若想用一些其他的字符，还是得用图片，
    2013-04-01

最新评论

关注微信公众号

扫一扫