前端人员如何在页面中导入外部字体

最新推荐文章于 2025-07-14 16:09:50 发布

HUSKle

最新推荐文章于 2025-07-14 16:09:50 发布

阅读量1.2w

点赞数 7

CC 4.0 BY-SA版权

文章标签：引入外部字体文件

本文链接：https://blog.youkuaiyun.com/HUSKle/article/details/81222685

本文介绍如何从指定网站下载方正字体，并利用在线工具将其转换为web可用格式。通过具体步骤指导读者如何将转换后的字体文件应用到项目中，并在CSS中正确引用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在http://fonts.mobanwang.com/fangzheng/这个网站中下载你所需要的字体文件，下载到页面解压之后，在https://www.fontke.com/tool/fontface/字体生成器中选择你所需要生成的字体

左侧所上传的文件就是刚刚解压出来的字体文件，右侧是你所需要生成的字体格式，点击立即生成，将生成的字体放到你的项目中，然后将

@font-face {
  font-family: "方正兰亭中黑_GBK";
  src: url("方正兰亭中黑_GBK.ttf") format("truetype");
}

引入到你的全局css中

.text{

font-family:方正兰亭中黑

}

这样就可以了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HUSKle

关注关注

7
点赞
踩
15

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

关于外部字体的使用

闰土月下追猹

11-16

189

字体使用字体压缩完整的字体库文件对于Web应用来说太过庞大解决方案一：字蛛所谓字体库，就是要包含尽可能多的字体，其实应用中可能根本用不到这么多，这时候就可以使用字蛛压缩一下，它会识别html中的所有用到该字体的文字，去除没有用到的字体。使用方法：安装npm install font-spider -g 把所有可能用到的字体都写到一个html文件index.html中，同时用CSS设置引入并使用外部字体 /*声明 WebFont*/ @font-face { font-f

html怎么连接外部字体,css外部字体怎么引入？css外部字体的引入方法介绍

weixin_32165219的博客

06-28

1035

在网站页面中有时我们需要有一个好看的字体，毕竟好看的字体会让整个页面看起来更加美观也更吸引用户，我们可能会想到用图片来实现这个好看的字体，但是今天的这篇文章并不是给大家介绍利用图片来做一个好看的字体，而是给大家来介绍一下css外部字体引入的方法。话不多说，我们直接进入正题~我们引入css外部字体需要利用的是css3的@font-face，@font-face是什么呢？下面我们来看一看@font-f...

3 条评论您还未登录，请先登录后发表或查看评论

css引入外部字体，应用到网页中

魏依一的博客

10-30

1184

TTF或.OTF，适用于Firefox 3.5、Safari、Opera。css样式中，用 font-family:keji；.EOT，适用于Internet Explorer 4.0+.SVG，适用于Chrome、IPhone。font-family：自定义名称。@font-face 引入字体；src: url 字体路径。网络上有字体转换器。

前端字体使用操作

最新发布

weixin_43204464的博客

07-14

262

/样式.data {

html怎么调用其他字体样式,网页设计中如何调用外部字体

weixin_31100713的博客

06-07

1063

字体使用是网页设计中不可或缺的一部分。网页是文字的载体，我们希望在网页中使用某一特定字体，但是该字体并非主流操作系统的内置字体，这样用户在浏览页面的时候就有可能看不到真实的设计。美工设计师最常做的办法是把想要的文字做成图片，这样做有几个明显缺陷：一、不可能大范围的使用该字体；二、图片内容相对使用文字不易修改；三、不利于网站SEO。网络上有一些使用sIFR技术、或javascript/flashh...

网页内引用外部字体方法

nimo观察者

04-05

2187

在自建博客的UU们可以关注一手，强推我的好兄弟辞旧

前端文字前端文字思源黑体！！！

03-16

标题中的“前端文字”和“思源黑体”暗示了我们的话题主要集中在前端开发领域，特别是关于字体设计和使用的部分。思源黑体是一款广泛应用于前端界面的开源字体，因此，我们将深入探讨这个主题。首先，让我们理解...

vue如何使用外部特殊字体的操作

10-15

在Vue.js应用中，引入和使用外部特殊字体是一项常见的需求，尤其当设计师为项目提供了定制化的字体时。本文将详细讲解在Vue项目中如何操作，以便让这些特殊字体正确显示。首先，你需要从网络上或者设计资源网站...

50天50个前端小案例-中文学习笔记

10-13

在CSS部分，我们学习了如何使用@import规则来导入外部字体，这可以极大地丰富网页的视觉效果。我们还了解到，*选择器被用来为所有元素设置通用的样式，比如盒模型的box-sizing属性。设置box-sizing为border-box意味...

vue项目中引入外部字体（超详细）

weixin_42088314的博客

11-10

4525

1、创建一个conmon文件夹，再在其下创建一个fonts文件夹，用于存放字体文件，此处以方正清刻本悦宋简体“FZQKBYSJW.ttf”为例，“FZQKBYSJW.ttf”为所下载的字体文件。 2、再在fonts文件夹下创建一个"font.css"文件，并写入样式（如下图）。 @font-face { font-family: "fzqkbysjt"; src: url('FZQKBYSJW.ttf') format('truetype'); font-weight: normal; f

如何在前端项目中管理依赖关系？

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

07-23

1276

接下来，你可以开始在自己的项目中实践这些策略，以构建更加健壮、易于维护的应用程序。记住，依赖管理不仅仅是工具的选择，更是一种开发文化的体现，它关乎到整个项目的生命力和团队的工作效率。例如，在团队协作中，如果每个人都在自己的机器上手动管理依赖，可能会因为版本差异导致难以追踪的 bug。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。这会将 lodash 库添加到你的项目中，并将其版本号记录在。文件的变化，可以极大提升项目的可维护性和团队的协同效率。

html调用外部字体,html引用外部字体

weixin_34891129的博客

06-09

1074

1、在线字体格式转换原字体文件 name.ttfhttps://www.fontke.com/tool/convfont/2、 css文件地址 @font-face {font-family: '方正尚雅';src: url("../font/x/x.eot");/* IE9 */src: url("../font/x/x.eot?#iefix") format('embedded-openty...

CSS引入外部字体的方式（@font-face）

weixin_46353030的博客

04-29

2450

步骤一、在css文件中或者html的style标签里使用@font-face，其语法格式如下: @font-face { font-family: "字体名称1","字体名称2",...; src: url("字体存放路径"); } 步骤二、使用该字体 .test { font-family: "字体名称1","字体名称2",...; } 例如我要引入一个Pixeboy字体，完整代码如下： @font-face { font-family: "Pi

网页中导入自定义字体并使用

weixin_30500105的博客

12-19

375

@font-face是CSS3中的一个模块，它可以把自己定义的Web字体嵌入到网页中。其使用方法： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导入自定义字体并使用</title> &...

项目开发中引入外部字体库

qq_40934679的博客

08-24

700

前端web项目下载字体库（如：方正兰亭中黑_GBK.ttf）全局引入 @font-face { font-family: "方正兰亭中黑_GBK"; src: url("方正兰亭中黑_GBK.ttf") format("truetype"); } 使用 .content{ font-family: 方正兰亭中黑; } 小程序引入外部字体库 下载字体库（如：方正...

R软件中调用windows字体二

辉的博客

12-04

7194

下载字体下载字体的网站可以去求字网，下载到的文字解压到系统自己文件夹中（C:\Windows\Fonts） showtext包介绍在系统字体存储盘中找到想要的字体，右键-属性找到其真正的名字。例如：楷书的名字为“simkai.ttf” 使用font_add函数添加字体 library(showtext) font_add(myfont, "simkai.ttf") ##添加字体 font.fa...

获取当前系统字体

YTFUNLOVE的BLOG

03-28

1261

宝玉 2004-2-26[url]http://www.webuc.net[/url][url]http://www.nwpubbs.net[/url]--> 获取当前系统字体和排版样式 function getSystemFonts(){ var a=dlgHelper.fonts.count; var fArray = new Array(); var oDropDown = docum

小芝士--前端如何设置三方字体

weixin_44283589的博客

03-06

439

如在前端设置字体时，可以通过CSS样式来指定字体。首先，需要在网页中引入方正字库提供的字体文件，可以是.ttf、.otf等格式的字体文件。然后，在CSS样式中使用@font-face规则来定义字体，并将字体文件链接到该规则中。最后，在需要应用该字体的元素上使用font-family属性来指定字体名称。以下是一个示例代码： @font-face { font-family: '方正宋体'; src: url('path/to/fangzhengsongti.ttf') format('truetyp

前端如何引入外部字体

weixin_50606255的博客

08-19

2791

作为前端应该都会遇到一个问题，在做界面UI时，常常会有些字体的样式跟设计图的样式不同，即使代码一样，通过和同事小伙伴百度，发现浏览器并不支持某些字体，是需要从外部引入的，下面简单记录一下自己的如何实现的不同的字体样式的： 1.将外部字体下载放在存放静态资源的文件夹中，我是直接问UI设计师要的字体文件 2.可以直接放在App.vue中全局使用，我是创建了一个scss文件专门用来引入字体 @font-face{ font-family: "Bahnschrift-BoldSemiCond.

前端字体

03-11

在前端开发中，字体的选择和应用对于提升网页美观度至关重要。为了有效管理和自定义网页上的字体样式，开发者通常会利用 CSS 中的 `font` 属性及其子属性。 #### 设置字体样式的标准语法当需要综合设定多个字体...