【微信小程序】设置字体跟随手机系统

糖葫芦biu

已于 2023-12-06 16:24:39 修改

阅读量3k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序 css

于 2023-04-12 15:05:09 首次发布

本文链接：https://blog.csdn.net/weixin_44120523/article/details/130107187

版权

小程序开发：全局设置跟随手机系统默认字体

前言

最近在开发一款微信小程序，发现字体不是跟随手机系统设置的字体,这样对用户很不友好，通过下面这行代码，就可以将页面的字体搞成系统默认字体了。

提示：要设置在app.wxss里面

代码如下：

page {
   
font-family:Monospaced Number,Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

糖葫芦biu

关注关注

2
点赞
踩
9

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序的页面因为微信系统设置的大字体导致排版错误

weixin_47035997的博客

07-23

2153

微信小程序的页面因为微信系统设置的大字体导致排版错误

微信小程序字体设置

weixin_43469391的博客

09-27

1万+

1.设置字体，大小，在容器中的位置 index.wxml中代码 <view class="postion"> <view class="font-settings">字体设置</view> </view> index.wxss中代码 .postion{ display: flex; justify-content: cent...

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

微信小程序：字体保持大小

weixin_34227447的博客

02-21

8575

小程序和网页差不多，前台用wxml把内容摆好，然后用css调整样式。所以和web一样，必须要能够精确控制每一个元素的大小。在Web中，通过CSS基本达到了像素级的控制。但在小程序中，情况有所不同。下面是我通过微信提供的事件分析，把近7天访问的终端的分辨率的情况汇总了一下：有些看起来很小，其实并不是老机子，而是手机和电脑在分辨率上有所差别。除了px，还有dp、vw、rem等一系列尺寸标准。 ...

uniapp 在app上字体如何不跟着系统字体大小变

热门推荐

include的博客

08-03

3万+

字体一 font-family:‘Courier New’, Courier, monospace; 字体二 font-family:‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif; 字体三 font-family:‘Gill Sans’, ‘Gill Sans MT’, Calibri, ‘Trebuchet MS’, ...

仿微信改变app的字体大小功能，设置应用字体大小

02-27

在Android开发中，为了提供更好的用户体验，经常需要自定义应用的字体大小，使其与系统设置独立，例如微信就提供了这样的功能。本篇文章将详细讲解如何实现一个类似微信的App字体大小设置功能，使得用户可以在应用内...

微信小程序导航栏跟随滑动效果的实现代码

10-17

在微信小程序开发中，为用户提供流畅的交互体验至关重要，而导航栏跟随滑动效果就是其中一种常见的增强用户体验的设计。本文将详细讲解如何通过实例代码实现这一功能。首先，我们需要在`wxml`文件中创建导航栏的...

uniapp 微信小程序小票打印机打印教程（超详细讲解）完整代码，下载后可直接使用

07-24

在本文中，我们将深入探讨如何使用uniapp框架和微信小程序来实现小票打印机的打印功能。这个教程将提供一个详尽的步骤指南，确保你能够理解并应用到实际项目中。我们将涵盖以下知识点： 1. **uniapp简介**：uniapp...

微信小程序字体了解

scorpio的世界

11-10

8622

微信小程序在IOS平台上默认是PingFangSC字体，在安卓上是思源字体。 微信小程序中字体单位rpx和px均可，取决于是否希望字体跟随屏幕大小做响应变化。设置默认字体可在app.wxss上编写： page{ font-family: "PingFangSC-Thin" } ...

微信小程序在text文本实现多种字体样式

10-16

主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

微信小程序实现点击按钮修改文字大小功能【附demo源码下载】

08-28

主要介绍了微信小程序实现点击按钮修改文字大小功能,涉及微信小程序事件绑定及setData动态修改Page页面data数据,进而控制页面元素属性动态改变的相关操作技巧,需要的朋友可以参考下

[微信小程序]手机系统默认字体的设置

史喜超的博客

06-13

9167

font-family:Monospaced Number,Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif!important; 微信小程序使用系统...

微信小程序字体样式font

m0_72168336的博客

11-29

3123

微信小程序字体常用样式

微信小程序：怎么设置字体？

夏天的博客

08-16

2万+

1.小程序设置字体有没有效果呢？ font-family: PingFangSC-Regular, PingFang SC; 如上设置，答案是没有一点效果的。因为真机调试的时候，手机是不带PingFang 字体的。 2.要怎样设置才能有自己想要的字体？设置字体有两种方法，但是最好的方案是 js动态加载字体，然后页面引用。 js部分在onload中写下 wx.loadFontFace({ family: 'webfont', source: 'url("//

微信小程序中使用特殊字体

辽辽无期的博客

03-04

1539

复制这样式放到你写的wxss文件中。使用下面这个网站进行字体转换。推荐几个常用下载字体的网站。

CSS 文本省略

RGSNbiubiubiu的博客

10-16

689

想让溢出的文本变成....... 形成想要的效果使用下面三个元素配合实现 overflow: hidden; 隐藏溢出的文本。 white-space:nowarp; 让文本不会自动换行就可以让第一个属性去隐藏文本了 text-overflow:ellipsis; 让隐藏的文本变成.... overflow 的属性： visible 默认值。...

微信小程序使用艺术字体（详细过程）

2303_78738507的博客

03-17

1468

我们在挑选字体过后，需要获取字体的直接下载链接，就如点击此链接过后，就能够在网页直接下载此字体，如：https://zf.sc.chinaz.com/Files/DownLoad/upload/2024/0201/cangeaiminxingkai.ttf此种链接。

spss随机随机森林

08-21

SPSS随机森林是指在IBM SPSS软件中使用随机森林算法进行数据分析和预测的一种方法。随机森林是一种集成学习算法，它由多个决策树组成，每个决策树都会对数据进行随机抽样和特征选择。通过集成多个决策树的结果，随机森林可以更准确地进行数据预测和分类。在SPSS中使用随机森林进行预测时，首先需要准备包含样本的原始数据表格，其中包括因变量和实际值。然后，使用随机森林算法基于因变量进行预测。最终，可以计算模型的精度，评估预测的准确性。在SPSS Modeler中，使用随机森林算法进行预测是一种可视化的建模过程。你可以通过拖拽节点、设置属性和连接节点来构建模型。最后，运行模型即可得到预测结果。这种可视化的建模方式使得使用随机森林算法更加直观和易于操作。123 #### 引用[.reference_title] - *1* *2* *3* [使用IBM SPSS Modeler进行随机森林算法预测](https://blog.csdn.net/xza13155/article/details/124169025)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]