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,一经查实,立即删除!

相关文章

在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、查看计…

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边框的旋转角度&#…

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

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

[认证授权] 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 # …

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

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

2016蓝桥杯省赛---java---A---6(寒假作业)

题目描述 现在小学的数学题目也不是那么好玩的。 看看这个寒假作业&#xff1a;□ □ □ □ - □ □ □ □ □ □ □ □(如果显示不出来&#xff0c;可以参见【图1.jpg】)每个方块代表1~13中的某一个数字&#xff0c;但不能重复。 比如&#xff1a; 6 7 13 9 - 8 1 …

微服务网关Ocelot

微服务网关是微服务架构中的核心组件,它是客户端请求的门户,它是调用具体服务端的桥梁.下面我们将使用开源项目Ocelot&#xff08;https://github.com/geffzhang/Ocelot&#xff09;搭建一款轻量级服务网关,不过在此之前我们将对微服务网关做个详细介绍,以便大家更加清晰的了解…

分表分库时机选择及策略

转载自 分表分库时机选择及策略 一. 分表 应用场景&#xff1a; 对于大型的互联网应用来说&#xff0c;数据库单表的记录行数可能达到千万级甚至是亿级&#xff0c;并且数据库面临着极高的并发访问。采用Master-Slave复制模式的MySQL架构&#xff0c;只能够对数据库的读进…

2015蓝桥杯省赛---java---A---2(星系炸弹)

题目描述 思路分析 方案一 方案二 package TEST;import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date;class Main{public static void main(String[] args) {SimpleDateFormat dateFormat new SimpleDateFormat("yyyy-MM-dd");…

NuGet社区使用体验调查

Nuget 是我们使用.NET Core的一项基础设施&#xff0c;针对国内访问NuGet服务器速度不稳定的问题我们希望通过收集一些来自用户的反馈来改善社区使用NuGet的体验。恳请您花2-3分钟时间完成以下的问题&#xff0c;我们会非常重视您的反馈。当我们收集完成所有的问卷&#xff0c;…

在护卫神上部署javaWeb项目,已经测试通过

以前一直在护卫神上部署PHP项目&#xff0c;今天忽然来了需求是部署javaWeb项目&#xff0c;刚开始一脸蒙蔽&#xff0c;后来发现也不是很难。那么接下来我们看看怎么在护卫神上部署java项目&#xff1a; 第一步&#xff1a;打开护卫神&#xff0c;在护卫神中添加一个网站&…

为什么选择微服务架构?如何取舍?

转载自 为什么选择微服务架构&#xff1f;如何取舍&#xff1f; 微服务是什么 微服务是一种架构风格&#xff0c;一个大型复杂软件应用由一个或多个微服务组成。系统中的各个微服务可被独立部署&#xff0c;各个微服务之间是松耦合的。每个微服务仅关注于完成…