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

最新评论