移动端字体选择

最新推荐文章于 2021-11-30 17:06:22 发布
最新推荐文章于 2021-11-30 17:06:22 发布
阅读量5.4k 收藏
点赞数
分类专栏： 移动端开发 文章标签： 字体 移动端字体适配
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crazywoniu/article/details/75106529
版权
本文探讨了移动端字体选择的问题，指出移动端若通过@font-face加载自定义字体会增加流量消耗。主流移动系统（iOS、Android、WP）的默认字体各不相同，且未包含PC常用的微软雅黑。在移动端开发中，通常采用系统默认字体，英文字体可统一为Helvetica，以实现较好的跨平台兼容性。由于Android系统的定制化，找到全局通用字体较为困难，建议无特殊需求时沿用系统默认设置。
摘要由CSDN通过智能技术生成

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

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

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

ios系统默认字体

默认中文字体是Heiti SC

默认英文字体是Helvetica

默认数字字体是HelveticaNeue

Android系统默认字体

最低0.47元/天 解锁文章
土家稀哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
字体移动
weixin_44150460的博客
08-14 226
一、从右向左移 代码 需要移动的文字 二、从左向右移 代码 需要移动的文字 三、一圈一圈绕着移动 代码 需要移动的文字 四、只移动三次就停了 代码 需要移动的文字 五、移一步，停一停 代码 需要移动的文字 六、左右来回移动 代码 需要移动的文字 七、忽隐忽现移动 代码 需要移动的文字 八、从下向上移动 代码 需要移动的文字 九 、从上向下移动 代码 需要移动的文字 十、垂直往复移动 代码 需要移...
ReactNative进阶（四十六）：移动端实现字体自适应_allowfontscaling(1)
最新发布
2401_84616230的博客
05-16 904
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】在开发时，相信大家都遇到过这样的问题：当用户设置了系统的字体大小之后，导致APP布局紊乱，甚至有些内容会被切掉/隐藏，这对于用户来讲，是非常不好的用户体验。那为什么会出现这种情况呢？原因是我们在开发的时候，布局的前提是系统的字体大小设置为默认大小，所以只能保证在系统字体大小正常的情况下，我们的布局是友好的，那么，我们应该如何解决这个问题呢？
字体移动（字体滚动）
聆听
01-09 644
从右向左移动：使用标签。默认右到左移动 我可以自己走动 从左向右移动： 我可以自己走动 从下向上移动 我可以自己走动 从上向下移动 我可以自己走动 移动速度：使用scrollamount属性控制 我可以自己走动 原地跳动文字 我 可 以 自 己
html引入字体移动端,移动端 html + 字体自适应
weixin_33196106的博客
06-30 302
数据中心if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function () {FastClick.attach(document.body);}, false);}if (!window.Promise) {document.writeln('' + '');}您的浏览器没有启...
android 布局 字体大小,移动端页面布局及字体大小该如何设置
weixin_39707612的博客
05-25 1153
之前发过一篇文章《移动端应该如何动态设置字体大小？》，主要说了移动web端布局的一些解决方法，本文再一次把这个问题提出来，并分别对安卓和IOS设备的屏幕了解做出自己的分享，在进入正文之前最好先了解：物理像素、逻辑像素、DPR和Rem。那么进入正文，不废话，直接把自己了解到的和一些看法说出来。首先是屏幕问题，现在主流的移动设备以安卓和IOS为主，我们在制作移动端页面也是以兼容这两种设备去布局。首先说...
字体文件过大，导致移动端加载缓慢
07-04
在iOS和Android等移动平台上，开发者可能会选择自定义字体来增强设计感和品牌一致性。例如，使用`.ttf`（TrueType字体）或`.otf`（OpenType字体）格式的文件。然而，这些类型的字体文件往往包含大量字符，包括多种...
移动端滑动选择插件
05-05
移动端滑动选择插件是一种广泛应用于移动Web应用和H5页面中的交互元素，它提供了便捷的用户界面，让用户可以通过滑动操作在多个选项之间进行选择。这种插件通常用于日期选择、时间选择、地区选择等场景，提高了用户...
jquery移动端日期选择器
01-10
为了使日期选择器更好地融入到页面设计中，开发者可以自定义其样式，修改CSS文件中的颜色、字体、边框等属性。此外，还可以通过JavaScript编程接口（API）来控制日期选择器的行为，例如监听选择事件，获取用户选定的...
jquery移动端时间选择插件
04-26
5. **定制化**：mtimer可能还支持主题定制，允许开发者根据应用的UI风格调整时间选择器的外观，如颜色、字体等。 6. **响应式设计**：考虑到移动端的多样性，mtimer应当具有良好的响应式设计，适应不同屏幕尺寸的...
移动端城市选择效果
06-01
"移动端城市选择效果" 是一个专为移动设备优化的组件，旨在简化用户在选择地理位置时的操作流程。传统的选择方式往往需要用户先选择省份，再选择城市，这在小屏幕的移动端可能显得繁琐。然而，这种新型的城市选择...
移动端动态字体
Q_Zkok的博客
11-30 518
<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 138
ios、android系统不支持微软雅黑字体，可以通过@font-face定义为微软雅黑字体并存放到 web 服务器上，在需要使用时被自动下载，但是这种方法也有两种影响，一来消耗用户的流量，二来对页面的打开速度造成了延迟。 @font-face { font-family: 'MicrosoftYaHei'; src: url('MicrosoftYaHei.eot'...
关于移动端web字体
u010231712的专栏
02-24 2127
关于移动端web字体 摘要 在Web编码中，CSS默认应用的Web字体是有限的，网页一般都是先有设计稿，然后转为DIV+CSS代码，这其中就会出现很大的差异，例如在移动端的网站展示字体的问题，移动端没有微软雅黑字体。 一、手机系统默认字体   1、ios 系统 (1)、默认中文字体是Heiti SC (2)、默认英文字体是Helvetica
移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题
p15097962069的博客
12-06 586
移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题
移动端字体使用建议
weixin_30307921的博客
02-22 231
移动端项目： 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...
vue移动端项目使用自定义字体
qq_45021462的博客
06-29 1180
手机只会显示系统自带的默认字体，如果要展示特殊字体只能引入字体包，但是引入的字体包如果是中文汉字类（比如楷体、黑体等）加载速度会很慢，因为毕竟汉字有很多。 使用自定义字体 引入所需的字体报，可以到git上找需要的字体包，但是貌似不是那么好找～～。 新建一个css文件，在里面引入所需的字体包（src），然后定义好该字体的名字（font-family）。 @font-face { font-family: 'Arial'; /*这里是说明调用来的字体名字*/ src: url('./Arial
设计师说，我们要在 App 里用十种字体！！！
itheima_Wujie的博客
10-10 5485
序在 Android 下使用自定义字体已经是一个比较常见的需求了，最近也做了个比较深入的研究。那么按照惯例我又要出个一篇有关 Android 修改字体相关的文章，但是写下来发现内容还挺多的，所以我决定将它们拆分一下，分几篇来详细的讲解。主要会是一些常用的替换字体的方案，最后还会介绍一些全局替换的方案，当然也会包含最新的 『Fonts in XML』的方案。期待你持续关注。本篇是本系列的第六篇，之前
移动端字体设置最佳实践
热门推荐
可遇，好孩子
01-10 2万+
字体设置body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;}iOS 4.0+ （iOS 9以下系统已经非常少） 使用英文字体 Helvetica Neue，之前的iOS版
uniapp 项目移动端字体适配
05-23
在移动端字体适配方面，可以使用rem单位来实现。rem单位是相对于html元素的字体大小来计算的，因此只需要设置html元素的字体大小，其他元素的字体大小就可以根据html元素的字体大小进行自适应。 步骤如下： 1. 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值