移动端字体选择

最新推荐文章于 2024-03-20 15:42:09 发布
VIP文章 最新推荐文章于 2024-03-20 15:42:09 发布
阅读量5.4k 收藏
点赞数
分类专栏： 移动端开发 文章标签： 字体 移动端字体适配
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crazywoniu/article/details/75106529
版权

今天突然设计师问我移动端字体改勇什么好？我当时一懵逼都不知道说啥了，貌似我每次做移动端页面从来都没有管过字体呢，后来想想以及结合一些资料才解释清楚。

移动端如果用css3 @font-face把字体放到服务器上，则会有加载请求，需要耗费流量，不过有特殊需求这也是一种解决办法。

首先来看看目前市面上的主流系统默认字体

ios系统默认字体

默认中文字体是Heiti SC

默认英文字体是Helvetica

默认数字字体是HelveticaNeue

Android系统默认字体

最低0.47元/天 解锁文章
土家稀哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
字体文件过大，导致移动端加载缓慢
07-04
移动端开发 -字体文件过大-导致应用运行缓慢甚至闪退的解决方案！下载此软件提取出你自己想要的文字进行重新生成font.ttf文件即可
字体移动
weixin_44150460的博客
08-14 222
一、从右向左移 代码 需要移动的文字 二、从左向右移 代码 需要移动的文字 三、一圈一圈绕着移动 代码 需要移动的文字 四、只移动三次就停了 代码 需要移动的文字 五、移一步，停一停 代码 需要移动的文字 六、左右来回移动 代码 需要移动的文字 七、忽隐忽现移动 代码 需要移动的文字 八、从下向上移动 代码 需要移动的文字 九 、从上向下移动 代码 需要移动的文字 十、垂直往复移动 代码 需要移...
uniapp、h5移动端字体适配
最新发布
文杰的博客
03-20 131
uniapp、h5 移动端字体适配。
字体移动（字体滚动）
聆听
01-09 637
从右向左移动：使用标签。默认右到左移动 我可以自己走动 从左向右移动： 我可以自己走动 从下向上移动 我可以自己走动 从上向下移动 我可以自己走动 移动速度：使用scrollamount属性控制 我可以自己走动 原地跳动文字 我 可 以 自 己
html引入字体移动端,移动端 html + 字体自适应
weixin_33196106的博客
06-30 288
数据中心if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function () {FastClick.attach(document.body);}, false);}if (!window.Promise) {document.writeln('' + '');}您的浏览器没有启...
android 布局 字体大小,移动端页面布局及字体大小该如何设置
weixin_39707612的博客
05-25 1131
之前发过一篇文章《移动端应该如何动态设置字体大小？》，主要说了移动web端布局的一些解决方法，本文再一次把这个问题提出来，并分别对安卓和IOS设备的屏幕了解做出自己的分享，在进入正文之前最好先了解：物理像素、逻辑像素、DPR和Rem。那么进入正文，不废话，直接把自己了解到的和一些看法说出来。首先是屏幕问题，现在主流的移动设备以安卓和IOS为主，我们在制作移动端页面也是以兼容这两种设备去布局。首先说...
想让界面优雅易读？跟你聊聊移动端字体的7准则！
03-03
今天分享移动端字体7个准则，希望能帮你快速提升移动端的易读性当视线掠过一行文字时，它是跳跃前进的，我们称之为扫视。你读的不是字母，甚至不是词语，而是文字某部分的影像，大脑会补上它预期的内容。如果超出...
UnityTMP通用字体电脑端移动端 WebGL端
07-06
博客连接;...在Unity WebGL中实现中文输入是一个复杂的问题，因为浏览器的原生输入框在WebGL中不可用。...然而，在使用 TextMesh Pro 显示中文时，可能会遇到一些问题，因为中文字符集与常规字体的字符集不完全匹配。
Js动态设置rem来实现移动端字体的自适应代码
10-21
主要介绍了Js动态设置rem来实现移动端字体的自适应代码，代码简单易懂非常不错，具有参考借鉴价值，需要的朋友可以参考下
vue项目在webpack2实现移动端字体自适配功能
10-15
主要介绍了vue项目在webpack2实现移动端字体自适配的相关知识，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
移动端动态字体
Q_Zkok的博客
11-30 512
<script> function setRem() { var ui_w = 375; // 获取屏幕的宽度 var clientWidth = document.documentElement.clientWidth || document.body.clientWidth; // 通过js动态改变html根节点字体大小 var html_ = document.getElementsB...
移动端使用字体总结
weixin_33896069的博客
03-07 132
ios、android系统不支持微软雅黑字体，可以通过@font-face定义为微软雅黑字体并存放到 web 服务器上，在需要使用时被自动下载，但是这种方法也有两种影响，一来消耗用户的流量，二来对页面的打开速度造成了延迟。 @font-face { font-family: 'MicrosoftYaHei'; src: url('MicrosoftYaHei.eot'...
移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题
p15097962069的博客
12-06 574
移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题
移动端字体使用建议
weixin_30307921的博客
02-22 216
移动端项目： font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self; pc端(含Mac)项目： font-family:Tahoma,Arial,”Helvetica Neue“,”Hiragino Sans GB”,Simsun,s...
js调用原生android应用的方法
热门推荐
土家稀哥
04-24 2万+
目前混合应用开发也在前端这块中有一定的应用范围了，但是js与app的交互就是需要解决的最主要问题了，下面写了简单例子来说明js如何条用app的方法，以android为例：首先，新建一个android工程，在工程中新建一个和js交互方法的类，如下：里面有一个方法hello来获取js传递来的参数，并作出相应的操作。其次，在布局文件中加入webview来显示网页，如下：再次，在主程序中加入以下代码：最后...
移动端页面在ios中图片不显示
土家稀哥
09-07 2万+
在移动端开发中，有的时候可能遇到这样的问题，我从别人网站上下载下来的图片，然后做出H5页面，但是在浏览器中和android中都显示正常，可是一到ios中图片就不显示了，这个时候就需要注意了，可能是图片的格式问题导致ios中不认识，比如我从网上下载的图片保存到电脑中不能预览的图片就是这种。 在计算机中打开预览图片显示如下： 这样的图片在ios中就不显示，解决办法很简单，就是在下载
Flutter初体验
土家稀哥
08-01 2523
最近flutter很火，但目前的flutter也是才刚开始，或许后面会和fuchsia一起称霸世界吧，今天就来看看这个fullter到底怎么样，来个初体验。 首先是flutter的官网：https://flutter.io/ 中文官网：https://flutterchina.club/ 一、环境搭建 在开始之前希望大家可以先把android开发环境搭建好，如果没有搭建的请移步google...
uniapp 项目移动端字体适配
05-23
在移动端字体适配方面，可以使用rem单位来实现。rem单位是相对于html元素的字体大小来计算的，因此只需要设置html元素的字体大小，其他元素的字体大小就可以根据html元素的字体大小进行自适应。 步骤如下： 1. 在index.html中设置html元素的字体大小： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>uniapp</title> <style> html { font-size: calc(100vw / 3.75); /* 100vw表示页面宽度的100%，3.75是设计稿的宽度 */ } </style> </head> <body> <div id="app"></div> <!-- UniApp编译成的静态资源 --> <script src="/static/js/manifest.js"></script> <script src="/static/js/vendor.js"></script> <script src="/static/js/app.js"></script> </body> </html> ``` 2. 在样式文件中使用rem单位进行字体设置： ```css /* 根据设计稿中的字体大小设置html元素字体大小 */ html { font-size: 16px; } /* 使用rem单位进行字体设置 */ p { font-size: 0.875rem; /* 14px */ } h1 { font-size: 1.5rem; /* 24px */ } ``` 这样就可以实现移动端字体的自适应了。需要注意的是，在设置html元素的字体大小时，需要根据设计稿的宽度进行计算，一般情况下设计稿的宽度为375px。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值