在网页上使用外部字体格式

深藏阁楼爱情的钟 2022-06-02 03:39 277阅读 0赞

在网页上使用外部字体格式

1、首先下载web font的文件，其中格式有.ttf(TrueTypeFont)是由Apple公司和Microsoft公司共同推出的字体文件格式，.svg，.eot，.woff，如下所示为整个目录：

![Center][]

2、然后再文件里面引用1中下载的文件

@font-face{
    		font-family: HYShiGuangTiW;     /*自定义的字体名*/
    		src:url('HYShiGuangTiW.ttf');   /*引入字体包*/
          }

3、使用引入的字体

p{
    	font-family: HYShiGuangTiW;       /*使用引入的外部字体*/
    	font-size: 30px;
        }

4、显示的效果

![Center 1][]

5、整个文件的内容：

<!DOCTYPE html>
        <html>
        <head>
    	<title>test</title>
    	<meta charset="utf-8" />
    	<style>
    		@font-face{
    			font-family: HYShiGuangTiW;     /*自定义的字体名*/
    			src:url('HYShiGuangTiW.ttf');   /*引入字体包*/
    		}
    
    		p{
    			font-family: HYShiGuangTiW;       /*使用引入的外部字体*/
    			font-size: 30px;
    		}
    	</style>
        </head>
        <body>
            <p>机四大行</p>
            <p>sjdjsdj</p>
        </body>
        </html>

[Center]: /images/20220602/041d002dd2b140feb1394e97cb258db7.png
[Center 1]: /images/20220602/f8dbf0abf9cc4546abe5100b2cbb8c75.png

发表评论取消回复

表情：

评论列表（有 0 条评论，277人围观）

还没有评论，来说两句吧...

相关阅读

相关 itext 生成 PDF(五) 使用外部字体

在 Spring Boot 项目中，使用 iTextPDF 库的 `BaseFont.createFont()` 方法并使用外部字体，您需要将字体文件放置在项目的资源文件夹中，

我会带着你远行/ 2024年03月22日 09:26/ 0 赞/ 54 阅读

相关什么是字体图标（Icon Font）？如何在网页中使用字体图标？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 字体图标（Icon Font） ⭐ 如何在网页中使用字体图标 ⭐ 写在最后 ------------

傷城~/ 2023年10月15日 11:16/ 0 赞/ 9 阅读

相关 uni-app使用外部字体

uni-app中当字体文件大于40kb时，需要自己转化成base64格式一：将下载好的字体文件转换成base64格式，转换地址：[https://transfonter.o

Love The Way You Lie/ 2022年12月30日 13:37/ 0 赞/ 550 阅读

相关关于使用外部字体

字体使用字体压缩完整的字体库文件对于Web应用来说太过庞大解决方案一：[字蛛][Link 1] 所谓字体库，就是要包含尽可能多的字体，其实应用中可能根本用

快来打我*/ 2022年12月23日 06:49/ 0 赞/ 160 阅读

相关关于外部字体的使用

字体使用字体压缩完整的字体库文件对于Web应用来说太过庞大解决方案一：[字蛛][Link 1] 所谓字体库，就是要包含尽可能多的字体，其实应用中可能根本用

╰半夏微凉°/ 2022年12月21日 14:56/ 0 赞/ 155 阅读

相关如何在微信小程序内使用外部字体

通过 font-face 使用外部字体首先通过 css 引入地址，然后在需要使用该字体时使用定义的 `font-family` 即可。 @font-fa

￡神魔★判官ぃ/ 2022年10月16日 07:45/ 0 赞/ 245 阅读

相关 css引入外部字体

.TTF或.OTF，适用于Firefox 3.5、Safari、Opera .EOT，适用于Internet Explorer 4.0+ .SVG，适用于Ch

落日映苍穹つ/ 2022年09月24日 07:24/ 0 赞/ 230 阅读

相关在网页上使用外部字体格式

在网页上使用外部字体格式 1、首先下载web font的文件，其中格式有.ttf(TrueTypeFont)是由Apple公司和Microsoft公司共同推出的字体文件格式，

深藏阁楼爱情的钟/ 2022年06月02日 03:39/ 0 赞/ 278 阅读

相关使用javascript在网页上显示时间

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

短命女/ 2022年05月14日 23:26/ 0 赞/ 292 阅读

相关 css引入外部字体

css引入外部字体 @font-face{ font-family: 'YaHei Consolas Hybrid'; src :

今天药忘吃喽~/ 2021年07月26日 11:35/ 0 赞/ 507 阅读