uni-app:ios/android中的nvue和vue页面加载自定义字体(hbuilderx 3.7.3)
2023-09-14 08:59:32 时间
一,官方文档地址:
https://uniapp.dcloud.net.cn/tutorial/nvue-api.html#addrule
二,代码
1,nvue页面:
模板
<view class="listTitle"> {{item.title}} </view> <view style="width:200rpx;display: flex;flex-direction: column;justify-content: center;"> <text style="font-family: kaitin;">{{item.author_name}}</text> </view>
js
beforeCreate() { console.log('======list3:beforeCreate');//加载字体: //#ifdef APP-PLUS-NVUE console.log("当前平台:APP-PLUS-NVUE,开始加载字体:"); const domModule = uni.requireNativePlugin('dom') domModule.addRule('fontFace', { 'fontFamily': "kaitin", 'src': "url('https://spkf-zsxn-prod.s3.cn-north-1.amazonaws.com.cn/pic/livecenter/kaiti.ttf')" }); //#endif },
css
.listTitle { font-family: 'kaitin'; padding-left: 20rpx; padding-right: 20rpx; height:100%; width:490rpx; display: flex; flex-direction: column; justify-content: center; }
注意:.listTitle这个样式无效,在nvue中,作用到text元素上才生效,大家注意判断
2,vue页面:
template:
<text class="title">{{title}}</text>
css
/* #ifdef APP-PLUS */ @font-face { font-family: "kaiti"; src: url("https://spkf-zsxn-prod.s3.cn-north-1.amazonaws.com.cn/pic/livecenter/kaiti.ttf"); } /* #endif */ .title{ font-size: 60rpx; font-family: 'kaiti'; } .content{ text-align: center; font-size: 40rpx; margin-top: 30rpx; line-height: 80rpx; margin-left: 60rpx; letter-spacing: 10rpx; font-family: 'kaiti'; }
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
三,测试效果
nvue页面:
vue页面:
四,查看hbuilderx的版本:
相关文章
- [Android]中文API(一)android包下的那些类
- Android高配置手机为何没iOS流畅
- [android] 解决DatePickerDialog和TimePickerDialog控件取消按钮问题
- [Android Pro] 横竖屏切换时,禁止activity重新创建,android:configChanges="keyboardHidden|orientation" 不起作用
- [Android Pro] StorageManager简介
- android仿ios开关按钮
- Android 开发之旅:短信的收发及在android模拟器之间实践(二)
- Android API之android.provider.ContactsContract.RawContacts
- Android API之android.os.Parcelable
- android脚步---不同activity之间参数传递
- 【IOS-COCOS2D-X 游戏开发之十五】COCOS2DX中响应ANDROID的BACK(返回)与MENU(小房子)事件&&COCOS2DX自动释放粒子内存函数!
- 可能是目前市面上唯一能够支持全平台的RTMP推流组件:Windows、Linux、Android、iOS、ARM
- Android点击EditText文本框之外任何地方隐藏键盘的解决办法
- Android版OpenCV图像处理技术亲自验证[二十五]之SQRBox过滤器(附源码)
- iOS app store无法提交以供审核 App隐私
- 【Android笔记14】Android基本的UI控件(Chronometer、SeekBar、RatingBar)
- Android 11.0 12.0进入默认Launcher前黑屏2秒的解决办法
- Android 仿ios实现app列表图标长按实现抖动效果
- Android 10.0去掉后台启动Service的限制
- Unity3d代码从Android/IOS迁移到WindowsPhone经验笔记
- Using Qt to build an Omi App for iOS (and Android)
- android sqlite批量插入数据速度解决方案
- Please ensure that adb is correctly located at 'D:Androidandroid-sdkplatform-toolsadb.exe' and
- Android修改kernel logo和开机动画(android)
- (Android+IOS)我们正在做一个新闻App,做几乎一样的,倾听您的建议 (画画)
- Android培训班(2)
- app自动化测试(Android)--App 控件定位
- 使用Android Studio build tensorflow/examples/android——直接用android studio即可
- Android 系统Battery电池流程
- Android Studio 4.2.2 Kotlin的import kotlinx.android.synthetic.main.(layout的xml名).view.*
- Android Studio的报错提示:android.content.res.Resources$NotFoundException: Resource ID #0xfffffe6c