[笔记] 网页跨平台文字设定 Font-Family

章节连结

在网页设定中,往往会被忽略的大概就属 Font-Family 了。这 Font-Family 掌管着你的网页最后呈现在使用者的浏览器上时,其字型究竟是怎样被决定的。基本上,中文字型内有包含英文字型,还有各大作业系统的内建字型不同,同时还有使用者本地端语言的问题。

html logo


说明

1. 英文字型要在前,中文字型要在后

因为中文字型里头会包含英文字型。若中文字型在前,那后面的英文字型永远不会被使用到

2.字型通用度小的要在前面

如果你将标楷体设定放在华康少女体前面,那后者也是永远不会被使用到的

3.sans-serif 这个通用字型要放在最后

4.同一个中文字体,它的中文和英文名称都要并陈

你不会知道使用者的电脑上是使用 “Microsoft JhengHei” 还是 “微软正黑体”

通用设定参考


相关文章

  • [指南] Embed Responsively 帮助 Google Maps, Youtube ….等加上自适应 RWD 效果
  • [指南] Chart.js 前端图表实用工具
  • [笔记] 在 Vue 中正确引用 src/assets 里的图片
  • [笔记] 将 Vue 专案自动布署到 Github Pages 上
  • [笔记] 网页跨平台文字设定 Font-Family
  • [指南] Dynamic Dummy Image Generator 简单好用的假图生产器
  • [笔记] 使用 MySQL Workbench 操作 Heroku 上的 JawsDB MySQL
  • [指南] 特殊符号好难打?两个网站让你直接复制贴上
  • [指南] Responsively.app 前端工程师必备的 RWD 一个画面全览工具
  • [笔记] Vue 如何监控视窗宽度,并让每个 component 可以取用
  • [指南] 在 Vue 专案中,修改 样式方法
  • [笔记] Figma 前端 设计师协作工具简单介绍
  • [笔记] 从 Vue CLI 3 开始建立规模化专案
  • [指南] Github 上的 Public APIs 列表
  • [指南] Iconmonstr 超过 4000 种的图示 SVG, EPS, PSD, PNG 支援
  • [笔记] CSSgram – 轻松套用 Instagram 上的滤镜效果
  • [笔记] Palettable 交互式的挑选配色工具
  • [笔记] Bootstrap 5 Alpha 版本上线囉 来看看新增些什么
  • [笔记] Vuetify 客制化制作弹出 + 滚动选单
  • [笔记] Vuetify Expansion 客制标题按钮
  • [笔记] 网页切版直播班 2020 春季班 – 课后心得
  • [笔记] 如何客制化自己的 Bootstrap 设定档
  • [笔记] 网页切版直播班 2020 春季班 – 第八周
  • [笔记] 解决 VS Code Terminal 中无法正常显示字体的问题
  • [笔记] HTML 与 PUG 线上格式转换
  • [笔记] 网页切版直播班 2020 春季班 – 第七周
  • [笔记] 使用 Gulp 进行网页前端自动化 – 用一般 HTML 来制作样板并排版
  • [笔记] 使用 Gulp 进行网页前端自动化 – 依照开发环境调整布署内容
  • [笔记] 使用 Gulp 进行网页前端自动化 – 架设简易服务器和压缩程式码
  • [指南] 如何使用 Google 所提供的 Material Icon
  • [笔记] 使用 Gulp 进行网页前端自动化 – Gulp 和 Bower 串接
  • [笔记] 网页切版直播班 2020 春季班 – 第六周
  • [笔记] 使用 Gulp 进行网页前端自动化 – PostCSS 自动加上前缀 & Load Plugins
  • [笔记] 网页切版直播班 2020 春季班 – 第五周
  • [笔记] Carbon 程式码使用 让你的网页程式码显示的更漂亮
  • [笔记] 使用 Gulp 进行网页前端自动化 – 初始化你的第一个 Gulp 编译专案
  • [笔记] 开始使用 Github Pages
  • [笔记] 使用 Gulp 进行网页前端自动化 – 简介
  • [笔记] 网页切版直播班 2020 春季班 – 第四周
  • [笔记] 来训练你的手指运动 – 英打练习 Typing Pratice
  • [笔记] Emmet 网络开发必备简码 加速你的开发流程
  • [笔记] 网页切版直播班 2020 春季班 – 第三周
  • [笔记] 运用 Moment.js 制作 AM / PM 时间外挂
  • [笔记] HTML5 Input time 时间格式
  • [笔记] 网页切版直播班 2020 春季班 – 第二周
  • [笔记] 网页切版直播班 2020 春季班 – 第一周
  • [笔记] MarkMan 跨平台 设计稿标注与量测工具
  • [笔记] Sass 实战全攻略 – 11 – 自制格线系统
  • [笔记] CodeSandbox 线上编辑器 模拟前端框架
  • [笔记] Sass 实战全攻略 – 10 – 设计模式和规范
  • [笔记] 工字型样板,长方形依照比例缩放
  • [笔记] Element-UI 的自定义表格边框样式
  • [笔记] Vue 关于 slot-scope 的简易认知
  • [笔记] Chart.js 长条图 最大值用特别颜色表示
  • [笔记] Sass 实战全攻略 – 9 – 错误的 CSS 设计方式
  • [笔记] Vue Watch 监听并延后发送请求
  • [笔记] Sass 实战全攻略 – 8 – 关于命名的那些事儿
  • [笔记] Element UI Table 表格表头纵向显示
  • [笔记] Sass 实战全攻略 – 7 – Sass/CSS 设计模式 (OOCSS)
  • [笔记] Sass 实战全攻略 – 6 – Sass/CSS 设计模式 (Smacss)
  • [笔记] 自定义 Element UI 标题字段遇上 Vue/no-unused error 的解决方法
  • [笔记] CSS 上常见的水平置中 & 垂直置中方法
  • [笔记] Sass 实战全攻略 – 5 – mixin 解决响应式网页的断点问题
  • [笔记] Sass 实战全攻略 – 4 – mixin 统整你常用的 CSS 方法
  • [笔记] Sass 实战全攻略 – 3 – import 切分档案和维护
  • [笔记] Vue2 Perfect-Scrollbar 置底开始
  • [笔记] Sass 实战全攻略 – 2 – 变量的运用
  • [笔记] Body-Parser 无法解析的 FormData 解决方案 – multer
  • [笔记] Sass 实战全攻略 – 1 – 简介
  • [全端开发] 打造一个公开聊天室 Vue.js+MySQL+Socket.io+passport-jwt
  • [指南] 简单制作自己的 Google 套件 (Extension)
  • [笔记] CSV 档汇入 PostgreSQL 常见错误一览
  • [笔记] 使用 PGAdmin 操作 Heroku 上的 PostgreSQL
  • [笔记] FlatIcon 免费非商业使用的向量图示图库
  • [笔记] 2020 前端工程师面试全记录
  • 工程师之路 Learning Programming
  • [指南] 线上 QR Code 产生器
  • [笔记] 台湾县市二联式选单 tw-city-selector.js
  • [笔记] Node.js 在 Windows 上的开发环境建置
  • [笔记] Heroku Sequelize 布署细节
  • [笔记] HTML 表格 Table 的 tr td th 用法
  • [笔记] 运用 Heroku 布署的初始化步骤
  • [笔记] 线上正规表示式测试器
  • [笔记] TinyURL 服务串接
  • 运用 Node.js 建网站的初始化步骤
  • [笔记] JavaScript 双层选单筛选连动
  • [笔记] Heroku 布署问题:如何将 Git 的子资料夹专案推上云端?
  • [笔记] Google, Facebook, Github OAuth 认证设定申请
  • Mongo DB 条件操作符
  • Express Validator 操作介绍
  • 安装 MongoDB 出现 SocketException: Address already in use 错误
  • [笔记] KeyCode & querySelectorAll 全部加上事件
  • [笔记] Can I Use 查询语法在各浏览器上可否正常使用
  • [笔记] JavaScript 将两个 array 合并一个 array
  • [笔记] 纯 CSS 制作图片轮拨效果
  • [笔记] API 串接, Axios 和绑定DOM事件
  • [笔记] CSS ul li 水平置中方法
  • [笔记] Async 异步处理和 JSON Object 取值
  • [笔记] textContent, event.target 和 innerHTML
  • [笔记] BootStrap Card + Grid System + Modal 弹出视窗
  • 按赞加入粉丝团

    延伸阅读

    GA瀏覽人氣:20