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

最新推荐文章于 2025-06-12 16:42:56 发布

HUSKle

最新推荐文章于 2025-06-12 16:42:56 发布

阅读量1.2w

点赞数 7

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/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

分享到新浪微博

扫一扫
举报

举报

微信小程序 - 详细引入并使用第三方字体（使用网络字体艺术字）引入外部字体详细教程，微信小程序项目加载第三方在线或本地字体文件流程，小程序中如何加载使用第三方字体！

资深程序员

10-11

4695

微信小程序，加载第三方字体，小程序引入使用网络字体，微信小程序详细引入并使用第三方字体（使用网络字体艺术字）微信小程序使用网络字体，小程序中如何加载使用第三方字体，小程序引用网络字体在安卓无效，小程序动态加载网络字体，微信小程序中使用自定义字体的实现与体验优化，微信小程序使用其他字体，微信小程序使用网络字体、阿里云OSS网络字体，如何在微信小程序内使用外部字体，小程序想使用第三方的字体?怎么引入才能生效，引入新字体并解决字体加载缓慢问题，小程序引用字体文件加载很慢怎么办，小程序开发API之动态加载网络字体

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

weixin_42088314的博客

11-10

4521

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

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

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

魏依一的博客

10-30

1181

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 字体路径。网络上有字体转换器。

关于外部字体的使用

闰土月下追猹

11-16

188

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

网页怎么调用字体ttf文件？

最新发布

2501_92131586的博客

06-12

683

在网页中调用自定义字体（如文件）可以通过 ‌CSS 的规则‌实现。以下是详细步骤和示例：将字体文件放入你的项目目录（例如文件夹）。示例结构：项目根目录/ ├── fonts/ │ └── your-font.ttf ├── css/ │ └── style.css └── index.html 在 CSS 文件中定义字体（以为例）：@font-face { font-family: 'YourFontName'; /* 自定义字体名称 */ src: url

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

weixin_32165219的博客

06-28

1034

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

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

weixin_31100713的博客

06-07

1062

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

网页内引用外部字体方法

nimo观察者

04-05

2181

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

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

10-15

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

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

10-13

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

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

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

07-23

1256

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

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

weixin_34891129的博客

06-09

1073

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

2447

步骤一、在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

373

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

R软件中调用windows字体二

辉的博客

12-04

7184

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

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

weixin_44283589的博客

03-06

433

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

前端如何引入外部字体

weixin_50606255的博客

08-19

2786

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

字体文件走CDN跨域

weixin_33888907的博客

11-30

1491

title: 字体文件走CDN跨域 date: 2018-07-11 10:45:00 tags: 防坑指南 categories: 防坑指南事因：线上环境静态资源走CDN，但出现了字体CDN跨域的情况。百度查了下可以改七牛云的白名单解决防盗链导致的跨域，但是修改后七牛处理需要很长时间。于是想到去年一个项目出现同样的问题，搜了下有道云笔记，感谢自己有记笔记的习惯。。。1分钟解决问题，字...

R绘图中使用中文字体

u011454283的专栏

01-11

3484

Windows系统字体存放在：C:\Windows\Fonts R 调用方法如下 windowsFonts( A=windowsFont("华文彩云"), B=windowsFont("华文仿宋"), C=windowsFont("华文行楷"), D=windowsFont("华文楷体"), E=windowsFont("华文隶书"), F=wi

前端字体

03-11

### 前端开发中字体的使用方法在前端开发中，字体的选择和应用对于提升网页美观度至关重要。为了有效管理和自定义网页上的字体样式，开发者通常会利用 CSS 中的 `font` 属性及其子属性。 #### 设置字体样式的标准语法当需要综合设定多个字体特性时，可采用复合形式的 `font` 缩写属性： ```css p { font: italic small-caps bold 16px/2 Arial, sans-serif; } ``` 此声明涵盖了从字体风格至具体类型的全部细节[^2]。上述代码片段依次指定了如下参数： - 斜体 (`italic`) - 小写字母大写处理 (`small-caps`) - 加粗显示 (`bold`) - 文字大小为 16像素 (`16px`) 及行高为两倍字号 (`2`) - 主要字体族名为Arial；如果该字体不可用，则回退到无衬线字体(`sans-serif`) 值得注意的是，在运用缩写的 `font` 属性时，某些部分可能是可选的，但是 **字体大小** 和 **字体家族名称** 是必不可少的两个要素。 #### 定义字体尺寸单位针对字体大小而言，存在多种表达方式可供选择，比如固定长度单位（如 px）、相对长度单位（像 em 或 rem），以及百分比 (%) 形式。其中，em 单位允许基于父级元素的比例调整，而 rem 则始终相对于根元素<html>来进行计算，这使得页面更加灵活适应不同的浏览环境。 #### 应用字体加粗效果除了通过 `font-weight` 来控制文本厚度外，也可以借助 HTML 内置标签 `<b>` 实现简单的粗体展示[^4]。然而，推荐做法还是应该优先考虑 CSS 方式来管理视觉表现层面上的变化，保持语义清晰的同时也便于维护统一的设计主题。 #### 调整字体倾斜角度同样地，虽然有专门用于创建斜体效果的 HTML 标签 `<i>` ，但在实际操作过程中建议更多依赖于 CSS 的 `font-style` 属性完成此类任务，从而确保文档结构与外观分离的原则得到贯彻执行。 #### 集成外部字体资源为了让网站拥有独特的字符呈现方式，往往还需要引入第三方提供的网络字体服务。这类字体文件一般可通过 @import 规则或者 link 元素载入，并且能够显著改善整体阅读体验[^3]。 ```html  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <style> body { font-family: 'Roboto', sans-serif; /* 使用新导入的字体 */ } </style> ``` 以上就是有关如何在前端项目里配置和操控字体的一些基本指导原则和技术要点介绍。