当前位置:首页 > 网络科技 > 网页开发中如何选取合适且统一的字体

网页开发中如何选取合适且统一的字体

1年前 (2024-08-31)admin网络科技118

在泪雪网移动端的开发中我发现之前网页兼容性确实做得不是特别友好,其主要原因是由于子凡我没有 iOS 设备,每次都是以安装开发以及 Chrome 内核为标准,最终的结果就会导致一些不兼容,由于之前还遇到过字体的显示问题,所以今天子凡就来给大家分享一下如何选给网页选择合适且统一的字体。

首先我们网页上要想统一字体其实有两种方法,一种是选择大家操作系统上都有的默认字体,第二种就是强行在网页总载入字体文件来实现,但是子凡非常非常不推荐这样的方式,这样对页面的加载造成了负担,并且没有必要刻意的用特殊字体。

根据不同的操作系统推荐对应使用以下的字体:(系统:英文常用字体;中文常用字体)

  • Windows:Tahoma 和 Arial;微软雅黑(Microsoft yahei);
  • Mac OS 和 IOS:Helvetica;华文细黑(STXihei)、冬青黑体(Hiragino Sans GB)和苹方(PingFang SC);
  • Android:Droid Sans;Droid Sans Fallback;
  • Linux:Tahoma 和 Arial;文泉驿微米黑;

那么根据 css 的写法,要想统一字体并且兼容所有的不同设备,最简单的方法就是将所有的字体都包含进去,一下就是子凡整理的适合各个平台系统的 font-family 设置:

1
2
//适合各个平台的 font-family 设置
body{font-family:Helvetica,Tahoma, Arial,"PingFang SC",STXihei,"Microsoft yahei","WenQuanYi Micro Hei",sans-serif;}

仅供搭建参考,以上的设置是针对 body 整个主体的,如果你需要根据页面不同布局而设置不同的字体就需要单独根据元素指定即可,不过子凡认为还是应该尽可能的保持一致为最佳,至少对于在网站文章内容中,应该绝对的统一字体和格式,别弄得像许多微信公众号的那种花样编辑。

对于网站内容,特别是文章中,应该做到统一的字号、颜色、位置,当然对于小标题可以加粗或者稍微特殊样式标明,但是也不应该过于花哨了。

好啦,以上就是子凡认为在网页开发中选取合适且统一的字体的一些看法观点以及实现方法,也是子凡认为一个优秀网站应该具备的良好用户体验的标准,不接受反驳,哈哈哈,欢迎评论讨论还是可以的哈。

w.haolusi.com

本文链接:https://w.haolusi.com/web-font-family-setting.html

扫描二维码推送至手机访问。

版权声明:本文由豪鲁斯兴趣网发布,如需转载请注明出处。

本文链接:https://w.haolusi.com/?id=2318

标签: 设计开发
分享给朋友:

“网页开发中如何选取合适且统一的字体” 的相关文章

Essential Strategies for Enhancing Cybersecurity in the Digital Age

Essential Strategies for Enhancing Cybersecurity in the Digital Age

With the rapid development of Information Technology, Cybersecurity has become an essential issue in modern Society. Cybersecurity...

尽早觉醒:找到自己一人能做的互联网生意

尽早觉醒:找到自己一人能做的互联网生意

没有经历过裁员的职场是不完美的。无论何种原因经历次裁员,可能对心智都是一次提升,前面也写过技术人怎么利用空窗期的文章技术人的空窗期,你的涅槃重生。经历过裁员的时候难免感到复杂和沉重。离开的背后,不仅有情感的波动,还有对未来的深深焦虑。当你被通知离职的那一刻,情绪复杂得难以描述。但是,当冷静下来,你会...

告别焦虑,技术人的“慢功夫”哲学

告别焦虑,技术人的“慢功夫”哲学

我们现在处一个快节奏的时代,每一个行业都在高速发展,我们也常常被告知要抓住每一个机会,快速成长,迅速成功。但对许多技术人来说,所谓的“快”,有时反而会让我们失去平衡,陷入焦虑和迷茫, 常常又进入事倍功半的困境。之前遇到过一位刚入行不久的年轻技术人,他一脸焦虑地问我:“如果我现在不快点提高,是不是以后...

最新免费可用!ChatGPT 4.0/4o/3.5 镜像 Mirror|免翻直链中文镜像(2024年8月更新)

最新免费可用!ChatGPT 4.0/4o/3.5 镜像 Mirror|免翻直链中文镜像(2024年8月更新)

本篇文章目录|Table of Contents Hide ChatGPT 4.0/4o/3.5 镜像站列表ChatGPT镜像更新历史什么是Cha...

最新可用!2024年Google谷歌镜像,Google学术镜像站(8月更新)

最新可用!2024年Google谷歌镜像,Google学术镜像站(8月更新)

本篇文章目录|Table of Contents Hide Google谷歌镜像-直接访问谷歌搜索01.Google谷歌搜索最新镜像入口02.Go...

WordPress别名slug增加点(.)符号支持

WordPress别名slug增加点(.)符号支持

熟悉 WordPress 的朋友们都知道,WordPress 在 URL 链接中的处理算得上是一刀切,所有的特殊符号及字符都是使用减号/连字符(-)来进行分隔,这其实是一种对搜索引擎非常友好的分隔方式,也是谷歌搜索引擎所推荐的连字符,其中谷歌有一句提示“不妨考虑在网址中使用连字符来分隔字...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。