资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Web字体的初探

Web字体的初探

luckyyulin / 772人阅读

摘要：字体的初探一，字体基本概念的介绍字体的分类衬线体衬线在印刷的文字中衬线字体对于人眼的辨识更轻松，阅读更舒服横细竖粗，开始和结束的地方有装饰。无论是还是下，不指定网页的中文字体时，默认的就是宋体。

Web字体的初探 一，字体基本概念的介绍 1.1 字体的分类
1.1.1 Serif（衬线体）
Serif（衬线）：在印刷的文字中衬线字体对于人眼的辨识更轻松，阅读更舒服横细竖粗，开始和结束的地方有装饰。在web上的字体，衬线字体比无衬线字体的辨识度更低，因为屏幕像素有限，不能很好地渲染出衬线体的效果。
1.1.2 Sans-Serif（无衬线体)
Sans-Serif(无衬线体）：在印刷的文字中，无衬线体比较醒目，在小字体场合比衬线体更加清晰，但是辨识度没有衬线体高。在web字体中，无衬线字体比衬线字体更易读。
1.1.3 Monospace（等宽字体）
Monospace（等宽字体）：每个宽度都一致的字体，看起来比较整齐，比较适合用于显示代码。比较著名的有Courier New字体。
1.1.4 Cursive（草书）
Cursive（草书）：相当于印刷中的手写体，看起来比较流畅，像手写一样。
1.2 常用的字体 
Serif，Sans-Serif，Monospace属于标准字体，Cursive,Fantasy属于非标准字体
1.2.1 衬线体（Serif）
常用的中文衬线体：宋体（Simsun），仿宋（FangSong），楷体（KaiTi），华文仿宋（STFangSong），华文楷体（STKaiTi）。
常见的英文衬线体：Times new Roman，Times
1.2.2 无衬线体（Sans-Serif）
常见的中文无衬线体：微软雅黑（Microsoft YaHei），黑体（SimHei），华文细黑（STXiHei）
常见的英文无衬线体：Tahoma，Arial，Helvetica，Verdana
1.2.3 等宽字体（monospace）
常见的等宽字体：Courier New，Courier
1.2.4 草书（Cursive）
常见的草书：Comic Sans MS
1.2.5 Fantasy
常见的Fantasy：Impact
二，网站中使用的字体 2.1 英文网站中使用的默认字体 
font：12px/1.5 Tahoma,Helvetica,Arial,sans-serif
Tahoma：英文windows操作系统默认的字体
Helvetica：Mac OS X系统的系统默认字体
Arial：早期windows英文系统的默认字体。XP和Vista都是Tahoma
Sans-serif是针对linux的，linux默认只有kernel，字体由用户自定义。
无论是XP还是Vista下，不指定网页的中文字体时，默认的就是宋体。因此在font-family中使用”宋体“是多余的，可以省去。
2.2 Windows操作系统提供的中文字体 
黑体：SimHei
宋体：SimSun
新宋体：NSimSun
仿宋：FangSong
楷体：KaiTi
仿宋GB2312：FangSongGB2312
楷体GB2312：KaiTiGB2312
微软雅黑：Microsoft YaHei(Windows 7开始提供）
2.3 OS X操作系统提供的中文字体 
冬青黑体：Hiragino Sans GB（Snow Leopard开始提供）
华文细黑：STHeiti Light（又名STXiHei）
华文黑体：STHeiTi
华文楷体：STKaiTi
华文宋体：STSong
华文仿宋：STFangsong
2.4 更多有趣的字体使用

上面介绍的字体属于常见的字体，也就是我们所说的Web safe font。其在大部分网站是可以正常显示的。下面介绍的是比较有趣特殊的字体的使用方式。

2.5 使用web font的方法
2.5.1 使用link标签
通过link导入样式，然后直接通过font-family使用，如：

font-family:"lobster"

参考Google Fonts

2.5.2 使用@import导入
通过@import导入字体的样式，如：

@import url(https://fonts.googleapis.com/css?family=Candal);

font-family:"Candal"

参考Google Fonts

2.5.3 使用javascript
通过javascript获取字体样式，如：

font-family:"Shadows Into Light"

参考Google Fonts

2.5.4 使用font-face
首先需要从网站下载对应的字体，然后url填入文件路径，如：

`@font-face{

            font-family:"saucer";
            src:url("fonts/SaucerBB.ttf") format("truetype");
        }`

font-family:saucer;

2.5.5 使用这些特殊字体的弊端
使用这些特殊字体可以产生很炫酷的文字，但是也存在很大的弊端：
1，不同的环境显示的内容可能不一样
2，显示的内容不可靠
3，需要把字体包含到网站（有时可能有100kb大）中需要消耗大量的下载时间
三，大型网站上的字体实践 
1.淘宝：font-family: tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;
2.百度：font-family: arial, 宋体, "Hiragino Sans GB", "Microsoft Yahei", 微软雅黑, 宋体, Tahoma, Arial, Helvetica, STHeiti;
3.京东：font-family: Arial, Verdana, 宋体；
4.Youtube：font-family: Roboto, arial, sans-serif;
5.github：font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";

参考的网站：

creating good websites

serif和sans-serif的区别

中文字体网页开发指南

专线服务 私有云 初探webrtc webrtc技术初探 初探腾讯云存储网关 SQL存储过程初探

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49641.html

相关文章

  • web安全初探

    摘要：安全初探攻击攻击全称跨站脚本攻击，是为不和层叠样式表的缩写混淆，故将跨站脚本攻击缩写为，是一种在应用中的计算机安全漏洞，它允许恶意用户将代码植入到提供给其它用户使用的页面中。 web安全初探 XSS攻击 XSS攻击全称跨站脚本攻击，是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS，XSS是一种在web应用中的计算机安全...

    Y3G 评论0 收藏0

  • web安全初探

    摘要：安全初探攻击攻击全称跨站脚本攻击，是为不和层叠样式表的缩写混淆，故将跨站脚本攻击缩写为，是一种在应用中的计算机安全漏洞，它允许恶意用户将代码植入到提供给其它用户使用的页面中。 web安全初探 XSS攻击 XSS攻击全称跨站脚本攻击，是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS，XSS是一种在web应用中的计算机安全...

    xuhong 评论0 收藏0

  • Web存储之LocalStorage初探

    摘要：存储之初探的发布和定稿为前端界带来巨大的变化，新增的和特性给业务带来了更多可能性，让用户体验拥有了更可能的丰富。只读返回一个整数，表示存储在对象中的数据项数量。会在过期时间之后销毁。安全性方面，中一般不建议存储敏感信息。 Web存储之LocalStorage初探 HTML5的发布和定稿为前端界带来巨大的变化，新增的API和特性给业务带来了更多可能性，让用户体验拥有了更可能的丰富。 · ...

    wpw 评论0 收藏0

  • RN 技术探索：Hermes Engine 初探

    摘要：原方式中是经过压缩的脚本文件，预编译后则是二进制文件。两者影响叠加导致整体减小，包大小得到优化。引擎包引擎包官方文档中对内存区的描述您的应用用于处理代码和资源如字节码已优化或已编译的码库和字体的内存。本文首发自普惠出行产品技术 自从 Google 的 Flutter 发布之后，Facebook 对 React-Native 的迭代开始快了起来，优化 React-Native 的性能表现...

    Cc_2011 评论0 收藏0

发表评论

登陆后可评论

0条评论

luckyyulin

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<