uniapp使用外部字体包

最新推荐文章于 2024-05-31 19:52:03 发布
最新推荐文章于 2024-05-31 19:52:03 发布
阅读量321 收藏
点赞数
分类专栏： uniapp 文章标签： uni-app css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32707555/article/details/129320493
版权 
@font-face {
	font-family: MiSans-Regular; /*字体名称，自己命名*/
	src: url('https://.../MiSans-Regular.ttf');/*字体路径*/
}
/*使用*/
.text-regular{
	font-family: MiSans-Regular;
}
空&白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app 引入外部字体
程序猿小白的博客
08-24 5458
uni-app 支持使用字体图标，请仔细阅读官方文档：地址 一、当字体文件大于40kb时，需要自己转化成base64格式： 1、将下载好的字体文件转换成base64格式，转换地址 2、转换完成后，下载文件，解压后将这三个文件放入项目中的static目录下: 3、在App.vue中引入该文件 @import url("./static/fonts/stylesheet.css"); 4、在代码中正常使用即可： 例如：font-family: YOUSHEhaoshenti; ...
uniapp 使用第三方字体
a1120590091的博客
07-28 1673
font-family的值就是解压的stylesheet文件中font-family的值(可以自定义修改).2.在项目static文件夹内新建文件夹style，将解压的stylesheet.css文件夹放进去。4.然后需要使用字体的地方 设置font-family就o了。1.将下载好的字体文件转换成base64格式，然后需要stylesheet.css这个文件。3.在app.vue中引入。(选择字体文件) 然后。
uniapp 添加字体ttf
最新发布
tengyuxin的博客
05-31 747
在uniapp中使用字体，一共分成两种情况，一种是普通vue页面，一种是nvue页面引入字体。。
uniapp笔记——使用字体包(.ttf)
weixin_44792197的博客
09-25 3030
一般在static建font文件夹，直接把字体包放在新建的文件夹下面，在app.vue引入字体包，全局可使用。字体转换网站：https://www.giftofspeed.com/base64-encoder。在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；先选择.ttf文件,白色方框里面就是base64格式的文件。在app.vue引入，全局可用。
uniapp 中使用不同字体
热门推荐
唐僧的专栏
04-19 1万+
官方文档 uniapp 字体 展示效果 : uniapp 多种字体的显示 H5网页 Android IOS uni.loadFontFace({ family: 'Bitstream Vera Serif Bold', source: 'url("https://sungd.github.io/Pacifico.ttf")', success() { console.log('success') } }) （官方）注意: 引入中文字体，体积过大时会发生错...
uniapp使用第三方字体
qq_43023197的博客
10-31 411
1.下载下来将字体引入项目my-font.ttf（自定义命名）
uniapp字体图标的使用
12-31
在开发uniapp应用时，使用字体图标是一种常见的实践，它能提供丰富的图形资源，并且具有体积小、加载快的优点。本文将深入探讨如何在uniapp中有效地使用字体图标。 一、字体图标概述 字体图标（Font Icons）是通过...
WPF使用外部字体文件
11-27
本文将详细讲解如何在WPF项目中导入并使用外部字体文件，以及如何通过`FontFamily`加载字体，并在`App.xaml`或资源字典中定义和引用字体样式，以设置全局默认字体。 首先，我们需要将外部字体文件添加到项目中。这...
Linux系统常用中文字体包
05-25
大部分Linux系统上并没有预装中文字体或字体不全，需要把常用字体拷贝到Linux服务器上，具体操作步骤：将本资源文件解压完整拷贝到Linux下的 /usr/share/fonts目录，然后依次执行mkfontscale 、mkfontdir 、fc-cache...
canvas使用外部字体
04-06
本文将深入探讨如何在Canvas中使用外部字体，以Inconsolata.ttf为例，帮助你更好地理解和实现这个功能。 首先，我们需要了解Canvas中的文本渲染。默认情况下，Canvas会使用浏览器支持的系统字体进行渲染。但如果你...
uniapp引入字体
weixin_55582221的博客
07-17 1451
今天开发项目的时候发现有个页面中字体不是我能用css能敲出来的感觉。然后就想能不能用原型上面的这个字体。经过一番的测试终于在页面中显示出我想要显示的字体了。
uniapp app引入字体包
Autumn_yun的博客
10-19 909
字体包
uni-app入门教程（9）字体库、自定义组件、打包和新闻实战
CUFEECR的博客
01-14 1211
使用iconfont字体库，需要选择图标、添加至购物车，再创建项目并添加图标、下载字体，使用其中的CSS并进行修改，并在App.vue全局导入。自定义组件位于components目录，可以自定义模板，使用前需要导入并注册，还可以定义props属性来给组件动态设置属性，使用该组件时给属性传值即可，子组件可以使用$emit触发父组件事件，实现组件间消息传递。微信小程序可以申请测试号，并实现预览和真机调试，APP可以选择云打包和本地打包。新闻列表和详情实战包含列表页样式设计、页面间参数传递和第三方接口使用。
小程序加载思源黑体
u011280778的博客
05-23 7789
思源黑体 CN（Source Han Sans CN）下载链接 放在app.js的onLaunch方法里一次加载 const util = require('utils/util.js'); App({ onLaunch: function () { //加载思源黑体 util.getFontFamily(); }, }) //这个方法建议放到公共...
uniapp小程序字体真机失效解决方案
weixin_50587417的博客
04-19 2969
uniapp小程序字体真机失效解决方案 uni.loadFontFace
uni-app 中使用外部第三方字体（非字体图标）
haplant的专栏
06-02 2260
在用 uni-app 进行前端开发的过程中，客户可能会要求某些文字采用特殊的字体（如：微软雅黑、草书等）。如果字体文件太大，可以将需要的字单独提取出来使用
uniapp使用导入字体
m0_66975650的博客
10-09 886
uniapp配置自己想要的字体
uniapp 使用自定义字体
09-17
### 回答1： 在 uni-app 中使用自定义字体需要在项目的配置文件中进行配置。可以在项目根目录下的 `manifest.json` 文件中添加以下配置来引入自定义字体文件。 ``` "feature": { "fonts": { "files": [ "static/fonts/my-font.ttf" ], "family": "MyFont" } } ``` 其中 `files` 数组是字体文件的路径，可以添加多个。`family` 是字体的名称，可以在样式文件中使用。 之后就可以在css 中使用自定义字体了 ``` .example { font-family: 'MyFont'; } ``` 或者在vue component 中使用 ``` <template> <view class="example">自定义字体</view> </template> <style> .example { font-family: 'MyFont'; } </style> ``` 注意，如果在不同平台下使用了不同格式的字体文件，需要在配置文件中分别设置。 ### 回答2： 在UniApp中使用自定义字体非常简单，以下是具体步骤： 1. 下载字体文件：首先，从适合你项目需求的网站上下载自定义字体文件。你可以选择普通的.ttf或.otf字体格式。 2. 创建字体文件夹：在你的UniApp项目目录中，创建一个字体文件夹。你可以将字体文件夹命名为"fonts"或其他你喜欢的名字。 3. 放置字体文件：将下载的字体文件复制或移动到字体文件夹中。 4. 引入字体文件：在App.vue文件中，找到全局样式部分并添加字体引入代码。例如： ```css @font-face{ font-family: 'MyCustomFont'; src: url('../fonts/MyCustomFont.ttf') format('truetype'); } ``` 确保路径引用的准确性，根据你的字体文件夹名称进行调整。 5. 应用自定义字体：在需要使用自定义字体的地方，添加字体样式： ```css .my-custom-font{ font-family: 'MyCustomFont', sans-serif; } ``` 将字体样式应用到相应的组件或页面上。 现在，你已经成功地在UniApp中使用了自定义字体！请记住，如果你的项目有多个页面，要在每个页面中进行字体引入和应用。 ### 回答3： 要在 UniApp 中使用自定义字体，首先需要在项目中添加自定义字体文件。通常字体文件会以.ttf、.otf 或 .woff 格式提供。在项目的 static 目录下新建一个 fonts 文件夹，并将字体文件放入其中。 接下来，在项目的 App.vue 文件中，使用 '@import' 引入字体文件。例如，如果字体文件名为 MyFont.ttf，则可以在 App.vue 文件的 style 标签中添加以下代码： ```css @import '../static/fonts/MyFont.ttf'; ``` 然后，在需要应用字体的组件中，通过样式设置属性 font-family 来指定使用自定义字体。例如，在 Index.vue 文件中的一个 div 上应用自定义字体，可以添加以下代码： ```html <template> <div class="custom-font">Hello UniApp!</div> </template> <style scoped> .custom-font { font-family: 'MyFont'; } </style> ``` 这样，该 div 元素就会应用 MyFont 字体。 另外，如果要在小程序上使用自定义字体，还需要在小程序的 app.json 文件中添加如下配置： ```json { "usingComponents": { "uni-app": "uni-app", "using-font-name": "/static/fonts/MyFont.ttf" } } ``` 这样，UniApp 就会在小程序中使用自定义字体。 总结起来，使用 UniApp 的自定义字体步骤如下： 1. 将自定义字体文件放入项目的 static/fonts 文件夹中。 2. 在 App.vue 文件的 style 标签中使用 '@import' 引入字体文件。 3. 在需要应用字体的组件中，通过样式设置属性 font-family 来指定使用自定义字体。 4. 在小程序的 app.json 文件中添加字体文件的配置。 这样就可以在 UniApp 中成功使用自定义字体了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值