【微信小程序】如何引入外部字体样式

最新推荐文章于 2024-01-26 00:52:20 发布
转载 最新推荐文章于 2024-01-26 00:52:20 发布 · 2.1k 阅读 · 0

本文详细介绍了如何将ionicons字体引入项目的过程。首先通过下载并转换ttf文件为Base64encode的TTF格式，接着将转换后的css代码复制到项目中，并添加相应样式。

我引入的字体是 ionicons 字体 
这里写图片描述
Download Zip后打开fonts文件夹，将对应字体的 ttf文件 上传至 https://transfonter.org/ 
这里写图片描述
注意一定要选中 Base64 encode 的TTF格式，Convert 后下载转换后的压缩包，并将其中的 transfonter.org-20180404-162638/stylesheet.css 中的代码复制粘贴到 需要的位置，比如我的为下： 
这里写图片描述
还要在后方加上相应的样式：（这个样式从ionicons-master\css\ionicons.css中找） 
这里写图片描述
然后在需要引入该字体的地方进行引入： 
这里写图片描述 
使用时 font-family 和@font-face里名字一样即可。（content那些什么的就不多说了）

微信小程序 - 使用第三方字体
MfddMobile的博客
09-17 4428
将下载好的字体文件解压，并将字体文件以.ttf或.otf格式保存在小程序项目的合适位置，比如放在项目的根目录下的"fonts"文件夹中。在开发过程中，我们可以根据需要，多次使用步骤四和步骤五来应用不同的字体样式。将上述代码中的"MyFont"替换为你想要的字体名称，并根据字体文件的保存位置修改url中的路径。在需要使用自定义字体的页面的.wxml文件中，使用上述定义的选择器，并编写相应的文字内容。在需要使用自定义字体的页面的.wxss文件中，引用已经在app.wxss中定义的字体。步骤一：选择字体文件。
微信小程序 - 详细引入并使用第三方字体（使用网络字体艺术字）引入外部字体详细教程，微信小程序项目加载第三方在线或本地字体文件流程，小程序中如何加载使用第三方字体！
🏆 前端领域优质创作者
10-11 5171
微信小程序，加载第三方字体，小程序引入使用网络字体，微信小程序 详细引入并使用第三方字体（使用网络字体艺术字）微信小程序使用网络字体，小程序中如何加载使用第三方字体，小程序引用网络字体在安卓无效，小程序动态加载网络字体，微信小程序中使用自定义字体的实现与体验优化，微信小程序使用其他字体，微信小程序使用网络字体、阿里云OSS网络字体，如何在微信小程序内使用外部字体，小程序想使用第三方的字体?怎么引入才能生效，引入新字体并解决字体加载缓慢问题，小程序引用字体文件加载很慢怎么办，小程序开发API之动态加载网络字体
微信小程序开发与应用——字体样式设置
小宇y的博客
07-07 4747
WXML（WeiXin Markup Language）是框架设计的一套标签语言开发中 WXML 页面就作为我们一些逻辑行为的入口，以及效果展示的承载者，可以把它理解为HTML语言。4、在页面配置下的wxml文件类型下，通过style标签或class标签来设置字体样式，它设置定义的样式类只能在index。，其取值通过px、rpx、cm来表示字体的大小，也可以通过small、medium、large等来表示。小程序的页面部分由四个文件类型组成的，它们在pages目录下，分别为。，其取值是字体的名称。
微信小程序在text文本实现多种字体样式
12-13
这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 微信小程序比较特别，它的wxml只允许用自己家的标签，像那些span、div什么的统统不可以用，那如何在text文本加入不同的样式呢，在html里面我们可以添加一个span，再给那些span添加不同的class或者style就可以了，但小程序不可以，在text里面只允许在加入text，不可以加view等东西，所以我们可以按照它提供的，再加一个text就可以了，但是随之而来的还有一些bug，一般的我们都是直接某个class下面的text应用
微信小程序引用外部字体
Just for fun的专栏
05-24 1509
1、找到字体包ttf、eot、svg、woff随便一种格式文件；文件转换网站：字体文件转换网站 2、上传2中的字体文件（最好是ttf文件）到https://transfonter.org/，选择base64 编吗 ，convert后下载. 3、跟components同级，新建一个style文件夹，里面放第二步转换完下载后的得到的那些后缀文件(eot,svg,ttf,woff,woff2) ...
如何在微信小程序内使用外部字体
web全栈开发的博客
05-28 1009
通过 font-face 使用外部字体 首先通过 css 引入地址，然后在需要使用该字体时使用定义的 font-family 即可。 @font-face { font-family: "kaiti"; src: url("https://spkf-zsxn-prod.s3.cn-north-1.amazonaws.com.cn/pic/livecenter/kaiti.ttf"); } .test { font-family: "kaiti"; } 这里的 url 要用 CDN.
微信小程序 如何引入外部字体库iconfont的图标
08-28
在微信小程序中引入外部字体库，特别是像Iconfont这样的图标库，可以极大地丰富小程序的图形元素，提升用户体验。本文将详细介绍如何在微信小程序中引入并使用Iconfont图标。 首先，你需要访问阿里巴巴矢量字体库...
微信小程序导入外部字体的详细流程
qq_56579776的博客
01-12 4263
同时，根据实际需求和性能考虑，合理选择使用自定义字体或系统默认字体，以达到最佳的用户体验效果。对于微信小程序开发者而言，如何在小程序中导入外部字体，让品牌信息在小程序中完美呈现，是一个值得探讨的问题。在资源管理页面中，找到“上传资源”选项，并选择“字体”分类。在微信小程序页面中，您可以使用自定义字体样式来应用导入的外部字体。在小程序的js文件中，使用wx.getFontList API获取自定义字体的类名，并在页面中引用该类名。在wxml文件中，通过引用自定义字体的类名，即可将外部字体应用到页面元素上。
微信小程序中使用自定义图标（阿里icon）的方法
10-18
总结来说，在微信小程序中使用自定义图标（如阿里云图标字体）涉及到引入字体文件、设置和使用@font-face规则以及利用CSS样式展示图标等技术环节。通过理解这些知识点，开发者可以有效地在微信小程序中展示丰富的...
微信小程序：引入自定义字体
Dove言和
12-30 3113
微信小程序引入外部字体 看了网上很多文章后发现可以把字体上传到https://transfonter.org/转成base64后下载下来， 引入对应css后发现太大啦， 然后在网上搜罗了一番，发现了一个神奇的网站可以在线提取字体https://www.fontke.com/tool/subfont/ 然后再到这个网站https://transfonter.org/转成base64只有十几...
微信小程序字体样式font
m0_72168336的博客
11-29 3710
微信小程序字体常用样式
微信小程序之字体样式设置
weixin_50970194的博客
01-31 8871
微信小程序之字体样式设置 1.利用style设置 在index.wxml中view括号里直接设置 2.利用class设置 在index.wxss中设置，然后回到index.wxml中进行引用 编译后效果
CSS 文本省略
RGSNbiubiubiu的博客
10-16 769
想让溢出的文本变成....... 形成想要的效果 使用下面三个元素配合实现 overflow: hidden; 隐藏溢出的文本。 white-space:nowarp; 让文本不会自动换行 就可以让第一个属性去隐藏文本了 text-overflow:ellipsis; 让隐藏的文本变成.... overflow 的属性： visible 默认值。...
【微信小程序开发】字体样式设置
热门推荐
fbzhl的博客
12-03 2万+
本篇文章将介绍在设计微信小程序时，利用style和class两种方式来设置字体样式的方法。我们的目标是做出以下效果。在实现上图效果之前，首先要掌握一些基本知识。代码中使用了view组件的style和class属性来设置字体样式。其中，style是直接在标签内部进行设置，而class需要在wxss文件中定义样式类，然后在wxml中引用。（可以理解为这里编写了一个函数，而函数的具体定义需要到另一个文件当中编写）.box和.title分别是用来设置边框和标题样式的，在app.wxss中定义，是全局样式，可以在项目
html5 css3简单小程序,微信小程序使用CSS3字体
weixin_32591379的博客
06-09 219
@font-face是CSS3中的一个模块，它主要是把自己定义的Web字体嵌入到的网页中。@font-face的语法规则：@font-face {font-family: ;src: [][, []]*;[font-weight: ];[font-style: ];}IconFont(图标字体)是用字体来代替图标、图片文件的方法，通过IconFont可以对图标的大小、颜色等进行控制。微信小程序的...
微信小程序开发自定义字体样式（维吾尔语字体)
2301_81691368的博客
01-26 8004
首先再pages目录创建font文件夹 然后 font文件夹里面创建font.wxss文件。然后app.wxss全局css样式引入字体样式就可以。font.wxss文件夹里面加入这些代码。需要更多的字体样式评论区留言。
微信小程序引入字体
最新发布
04-20
### 微信小程序中引入和使用自定义字体 在微信小程序中引入和使用自定义字体可以通过多种方式实现，具体方法取决于开发者的需求和技术栈。以下是几种常见的解决方案： #### 方法一：通过 `@font-face` 声明字体 可以在项目的样式文件（如 `.wxss` 文件）中使用 CSS 的 `@font-face` 来声明自定义字体。这种方式适用于静态资源的场景。 ```css /* 在 style/font.wxss 中 */ @font-face { font-family: "CustomFont"; src: url("https://example.com/fonts/CustomFont.ttf"); } .text-with-custom-font { font-family: "CustomFont", sans-serif; } ``` 此方法需要确保字体文件能够被正确加载，并且路径有效[^1]。 --- #### 方法二：使用 `wx.loadFontFace` 动态加载字体 对于动态加载需求，可以利用微信小程序提供的 API —— `wx.loadFontFace` 接口来完成。该接口允许程序运行时加载指定的字体文件。 ```javascript // 在 JavaScript 文件中调用 wx.loadFontFace wx.loadFontFace({ family: 'MyDynamicFont', source: 'url("https://example.com/fonts/DynamicFont.woff2")', success(res) { console.log('字体加载成功:', res); }, fail(err) { console.error('字体加载失败:', err); } }); ``` 一旦字体加载成功，就可以在页面中的任何地方通过设置 `font-family` 属性来应用它[^2]。 --- #### 方法三：本地存储字体文件 如果希望减少对外部网络依赖，可以选择将字体文件作为本地资源打包到小程序中。此时需注意调整相对路径以匹配实际目录结构。 ```css /* app.wxss 或其他全局样式表 */ @font-face { font-family: "LocalFont"; src: url("/assets/fonts/LocalFont.otf"); /* 路径应指向 fonts 目录下的文件 */ } .custom-text-class { font-family: "LocalFont", serif; } ``` 这种方法的优势在于离线可用性和更快的加载时间，但也可能增加包体积[^4]。 --- #### 注意事项 1. **跨平台兼容性** 部分情况下，某些字体可能无法正常渲染于 Android 设备上。这通常是因为操作系统层面未完全支持特定格式的字体文件。建议测试不同设备的表现并选用广泛适配的字体类型（如 WOFF/WOFF2）。 2. **性能优化** 字体文件较大可能导致首屏加载变慢。因此推荐压缩字体大小或将非必要部分延迟加载[^1]。 3. **版权问题** 使用第三方字体前务必确认其授权许可范围是否允许嵌入至应用程序内发布[^3]。 --- ### 示例代码总结 以下是一个完整的例子展示如何结合以上技术要点在一个简单的微信小程序项目里配置自定义字体： ```html <!-- index.wxml --> <view class="custom-font">这是采用自定义字体的文字</view> ``` ```css /* index.wxss */ @import "../../style/font.wxss"; .custom-font { font-family: "CustomFont", Arial, sans-serif; } ``` ```javascript // utils/loadFonts.js (可选) export function loadExternalFont() { return new Promise((resolve, reject) => { wx.loadFontFace({ family: 'ExternalFont', source: 'url("https://external-source.com/fonts/FancyFont.woff2")', success: resolve, fail: reject, }); }); } ``` ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值