uniapp修改字体

最新推荐文章于 2025-06-22 20:16:22 发布

最帅的GISer

最新推荐文章于 2025-06-22 20:16:22 发布

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/qq_43391694/article/details/119743548

uniapp 专栏收录该内容

5 篇文章

订阅专栏

这篇博客详细介绍了如何在前端项目中引入并使用自定义字体。首先，你需要下载字体文件，然后将其导入项目。接着，在CSS中使用`@font-face`规则注册字体。例如，注册名为'bulingstyle'的字体，并指定其路径和格式。之后，创建一个CSS类，如`.bulingziti`，设置`font-family`为刚才注册的字体名称。最后，将该类应用到`<text>`标签，如`<text class=bulingziti>BuLing</text>`，即可在页面上看到自定义字体的效果。

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

1.下载字体
2.将字体导入
3.在style中使用@font-face注册字体

@font-face{
	font-family:"bulingstyle";
	src: url('../../static/login/bulingstyle.ttf') format('truetype');
}

4.再使用.类名{}来对字体引用

.bulingziti{
	font-family: bulingstyle;
}

5.使用

<view>
		<text class="bulingziti">BuLing</text>
	</view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

最帅的GISer

关注关注

1
点赞
踩
3

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

高级前端工程师

04-02

6319

uni-app，支付宝微信小程序，h5，手机端H5网页，移动端网站，安卓app，ios苹果app，nvue，全局设置字体大小，退出后还能记录字号大小，uniApp将全部页面的字体字号进行修改，uniapp设置改变全局字体大小功能，动态调整应用字体大小，详细教程，动态显示字体大小，可调整显示字体大小，如何解决不同端字体大小的问题，除了rem还有什么方法，设置全局字体大小，用户设置字号大小，应用字体大中小，实现用户全局设置应用字体大小，老年模式字体设置思路，h5端不行怎么办，移动端不生效，修改全局字号，一键改整

uniapp [全端兼容] - 详细实现全局修改设置字体大小功能效果，统一修改页面字号字体大小，一键改变字号整个项目立即生效，大中小字号预设、老年人大字模式场景，uniApp全平台兼容控制页面字号大小

最新发布

weixin_67093879的博客

06-22

374

如何在微信小程序中使用阿里字体？首先从阿里图标库下载所需字体子集（如"我是一只"），并通过transfonter.org转换为WOFF格式。将转换后的文件放入项目目录，在app.vue中引入。使用时指定font-family和font-size即可显示。注意：字体文件需小于40KB，建议使用TTF/WOFF格式，大文件可能影响加载速度。使用示例：<text style="font-size:100rpx;font-family:'AlimamaDaoLiTi'&quo

【亲测免费】 UniApp 字体修改指南：轻松实现宋体替换，提升应用设计个性化

gitblog_06503的博客

09-20

703

UniApp 字体修改指南：轻松实现宋体替换，提升应用设计个性化【下载地址】UniApp字体修改指南附宋体TTF文件本仓库提供了一个详细的指南，帮助你在 UniApp 项目中修改字体，并附带了宋体（SimSun）的 TTF 字体文件。通过本指南，你可以轻松地将项目中的默认字体替换为宋体，以满足特定的设计需求 ...

uniapp实现全局设置字体大小(字体大小切换)

m0_73363632的博客

04-22

5267

uniapp实现全局设置字体大小(字体大小切换)

[保姆级教程]uniapp设置字体引入字体格式

肥晨开发的学习之路

06-21

6014

在 UniApp 中设置和引入自定义字体（如 .ttf、.woff、.woff2 等格式）通常涉及几个步骤。但在 UniApp 中，可能需要直接使用相对路径或绝对路径。确保路径指向字体文件。文件夹下的文件不会被 Webpack 处理，而是直接复制到最终的打包目录中。行业内幕，洞察先机。确保有权使用这些字体，并遵守任何相关的许可协议。是 Vue CLI 项目中常用的别名，它指向。将字体文件放入你的 UniApp 项目的。首先，你需要有字体文件。部分或单独的 CSS 文件），使用。规则来定义你的字体。

uniapp修改字体颜色

09-20

uniapp中修改字体颜色的方法有多种。对于导航栏的字体颜色，可以通过在页面配置文件中设置navigationBarTextStyle属性来实现。例如，将navigationBarTextStyle的值设置为"black"可以将导航栏的字体颜色改为黑色。 ...

uniapp-010-自定义实现字体图标

浪漫韫秋

02-15

195

自己去实现一个自定义的图标。

uniapp 默认字体

01-08

例如，在微信小程序环境下，如下所示的方式能够有效修改占位符的颜色与字体大小[^2]: ```html class="findInput" type="text" placeholder="关键词查询" placeholder-style="color: #ffffff;font-size: 24rpx;...

uniapp全局修改字体

weixin_49295874的博客

04-26

4958

@font-face { font-family: uniicons;//字体 src: url('/static/uni.ttf');//包路径 }

uniapp使用字体包，更换个性化字体

茉莉的博客

11-25

3054

1、将字体的包体存入在static文件夹下 2、在app.js中引入 @font-face { font-family: my-font; src: url('~@/static/Times New Roman.ttf'); } 3、最后在页面中正常使用就行了 .content { overflow: hidden; position: relative; background: url(../../static/bg.png); background-size: 1

跨平台应用开发进阶(十五) ：uni-app实现全项目字体替换

IT全栈华强工作室

05-23

1664

文章目录一、前言二、实现三、拓展阅读一、前言二、实现三、拓展阅读

uniapp修改字体（附宋体ttf文件）

qq_42739199的博客

08-11

1930

在common下新建字体font.css文件下载字体库宋体提取码：song 给字体文件转base64 转换地址复制base64文件 font.css文件项目App.vue引用完成

uniapp笔记——使用字体包(.ttf)

weixin_44792197的博客

09-25

4062

一般在static建font文件夹，直接把字体包放在新建的文件夹下面，在app.vue引入字体包，全局可使用。字体转换网站：https://www.giftofspeed.com/base64-encoder。在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；先选择.ttf文件,白色方框里面就是base64格式的文件。在app.vue引入，全局可用。

uniapp开发修改字体样式font-family

qhs320684的博客

12-02

3020

uniapp修改字体样式

【uniapp】uniapp设置改变全局字体大小功能：

SunPeng的博客

03-18

6740

【uniapp】uniapp设置改变全局字体大小功能：

uniapp 全局自定义字体

weixin_35752645的博客

01-11

2172

在 uni-app 中，你可以通过全局样式(global style)的方式设置自定义字体。首先，你需要将字体文件放入项目中，然后在 main.js 文件中引入该字体文件，最后在全局样式中设置 font-family 即可。示例: 将字体文件放入项目中 main.js 中引入字体import './static/fonts/custom-font.css' ...

uniapp实现全局设置字体大小，实现小中大的字体切换

qq_38118138的博客

05-11

8915

uniapp实现全局设置字体大小，实现小中大的字体切换