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即可!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/326173.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html5 block调用html,HTML: blockquote 标签

HTML: 标签HTML 标签在HTML文档中从另一个来源定义了长块引用。传统上&#xff0c;浏览器将在 标签中找到的文本呈现为缩进文本。该标签通常也称为 元素。在线示例定义一个摘自另一个源的块引用&#xff1a;示例html>HTML5 blockquote by www.nhooo.comHeading 1这是将出现在…

android之微信分享音频

android之微信分享音频 代码&#xff1a; WXMusicObject muObj new WXMusicObject(); muObj.musicUrl "http://music.baidu.com/song/546920050?pstsug"; WXMediaMessage msg new WXMediaMessage(); msg.mediaObject muObj; msg.title "越过山丘";…

在ASP.NET Core中使用Apworks快速开发数据服务

不少关注我博客的朋友都知道我在2009年左右开发过一个名为Apworks的企业级应用程序开发框架&#xff0c;旨在为分布式企业系统软件开发提供面向领域驱动&#xff08;DDD&#xff09;的框架级别的解决方案&#xff0c;并对多种系统架构风格提供支持。这个框架的开发和维护我坚持…

2015蓝桥杯省赛---java---A---1(熊怪吃核桃)

题目描述 代码实现 package TEST; class Main{public static void main(String[] args) {int n1543;int sum0;while (n!1){if(n%20){n/2;}else {sum;n--;}}System.out.println(sum1);} }答案 5

多功能语音播放器上线啦~

应广大学生反映&#xff0c;学程序不会读单词&#xff0c;留言问我能不能做个语音播放器&#xff0c;就是能输入英文能读出来的那种&#xff01;&#xff01;为了帮助公众号里面仅有的几百粉丝&#xff0c;我就顺手写一个吧&#xff0c;万一还能增加点粉丝呢&#xff1f;于是经…

Redis进阶之主从复制

转载自 Redis进阶之主从复制 一、主从复制概述 主从复制&#xff0c;是指将一台Redis服务器的数据&#xff0c;复制到其他的Redis服务器。前者称为主节点(master)&#xff0c;后者称为从节点(slave)&#xff1b;数据的复制是单向的&#xff0c;只能由主节点到从节点。 默认…

html图片通过照片查看器打开图片,在Windows7中打开照片,提示“Windows 照片查看器无法显示此图片,因为计算机上...

在Windows7中打开照片&#xff0c;提示“Windows 照片查看器无法显示此图片&#xff0c;因为计算机上的可用内存可能不足。请关闭一些目前没有使用的程序或者释放部分硬盘空间(如果硬盘几乎已满)&#xff0c;然后重试。” 如下图所示&#xff1a;处理过程&#xff1a;1、查看计…

android微信分享之视频、URL地址、表情分享

android微信分享之视频、URL地址、表情分享 1、视频分享 1、创建WXVideoObject对象&#xff0c;用于指向视频URLWXVideoObject videoObject new WXVideoObject(); // 2、设置视频urlvideoObject.videoUrl "http://v.youku.com/v_show/id_XMzI0MzA3NjI1Ng.html?…

2015蓝桥杯省赛---java---A---3(九数分三组)

题目描述 代码实现 package TEST;class Main{public static void main(String[] args) {for (int i 100; i < 335; i) {if(check(i)){System.out.println(i);}}}public static boolean check(int n){String an""n*2n*3;if(a.contains("1")&&a…

EntityFramework Core不得不注意的性能优化意外收获,你会用错?

前言 这两天在着实研究EF Core项目当中对于一些查询也没实际去检测&#xff0c;于是想着利用放假时间去实际测试下&#xff0c;结果本文就出来了&#xff0c;too young,too simple&#xff0c;后续博主会从底层翻译表达式树弄起&#xff0c;来从源头了解EF Core&#xff0c;通…

微服务为什么离不开spring cloud?

转载自 微服务为什么离不开spring cloud? 现如今微服务架构十分流行&#xff0c;而采用微服务构建系统也会带来更清晰的业务划分和可扩展性。同时&#xff0c;支持微服务的技术栈也是多种多样的&#xff0c;本系列文章主要介绍这些技术中的翘楚——Spring Cloud。这是序篇&a…

html画等边三角形,前台面试:使用CSS画一个等边三角形

CSS是前台面试必考的内容&#xff0c;有时候会面试官会出题让你画少量基本图形。由于画图的过程中可以考察很多的CSS知识点。今天我们就和大家详情一个比较难得等边三角形。思路是利使用三个div的边框来拼成一个三角形&#xff0c;只要要调整好左右两个div边框的旋转角度&#…

CSS3美化网页元素

一、CSS的作用&#xff1a; 1.有效的传递页面信息。 2.使用CSS美化过的页面&#xff0c;使得页面更加漂亮&#xff0c;吸引用户。 3.可以很好的突出页面的主题内容。 4.具有良好的用户体验。 二、span标签的作用&#xff1a; 自己本身在网页中不起作用&#xff0c;但是可以让某…

2017蓝桥杯省赛---java---A---1(迷宫)

题目描述 X星球的一处迷宫游乐场建在某个小山坡上。 它是由10x10相互连通的小房间组成的。房间的地板上写着一个很大的字母。 我们假设玩家是面朝上坡的方向站立&#xff0c;则&#xff1a; L表示走到左边的房间&#xff0c; R表示走到右边的房间&#xff0c; U表示走到上坡方…

Android之ZXing扫描二维码以及生成二维码

Android之ZXing扫描二维码以及生成二维码 ZXIng项目地址&#xff1a;ZXing地址 项目结构 扫描二维码&#xff1a;使用 CaptureActivity类 项目代码&#xff1a; import android.content.Intent; import android.graphics.Bitmap; import android.graphics.BitmapFactory; impo…

[认证授权] 2.OAuth2授权(续) amp;amp; JSON Web Token

0. RFC6749还有哪些可以完善的&#xff1f; 0.1. 撤销Token 在上篇[认证授权] 1.OAuth2授权 中介绍到了OAuth2可以帮我们解决第三方Client访问受保护资源的问题&#xff0c;但是只提供了如何获得access_token&#xff0c;并未说明怎么来撤销一个access_token。关于这部分OAut…

Nginx动静分离实现负载均衡

转载自 Nginx动静分离实现负载均衡 前期准备 使用Debian环境。安装Nginx(默认安装)&#xff0c;一个web项目&#xff0c;安装tomcat(默认安装)等。 Nginx.conf配置 1 # 定义Nginx运行的用户 和 用户组 如果对应服务器暴露在外面的话建议使用权限较小的用户 防止被入侵2 # …

浮动

一、标准文档流&#xff1a; 1.指元素根据块级元素或行内元素的特性按从上到下&#xff0c;从左到右的方式自然排列&#xff0c;默认的排序方式。 二、块级元素&#xff1a; div,p,列表&#xff1a;宽度默认为浏览器的宽度&#xff0c;可以单独设置宽和高 三、行内元素&#xf…

html5动画是什么,10个HTML5动画 让你忘掉Flash是啥(组图)

你最近可能已经听到了很多关于Flash是面临垂死挣扎的技术以及它将如何很快被HTML5的取代。就个人而言&#xff0c;我认为HTML5会慢慢取代一些Flash的东西&#xff0c;但Flash会永远有它的一席之地&#xff0c;特别是开发复杂的游戏和丰富的互联网应用。如果你还没有看到HTML5动…

Android之Bitmap高效缓存以及android缓存策略

Android之Bitmap高效缓存 一、Bitmap高效加载 1、bitmap的基本概念 位图&#xff1a;获取像素值进行加载。 Bitmap是Android系统中图像处理中的最重要的一个类。 通过Bitmap我们也看获取图片的信息 获取到信息后&#xff0c;我们可以对其进行缩放、裁剪等操作 2、Bitmap的…