web字体衬线字体与非衬线字体区别字体扫盲

2024-05-09 13:47:13

首先是因为心中有很多问题，这些问题困扰我很久了，这些问题对于一个不是专门做前端的web开发人员来说可能都会有。

web可以用什么样的字体？

我特意看了很多网站，包括很多大网站，排名很不错的网站，他们用的字体基本上也就是那几种，没有太大的差别。

淘宝 font: 12px/1 Tahoma, Helvetica, Arial, "/5b8b/4f53", sans-serif;

百度 font-family:arial

qq font-family:"宋体","Arial Narrow"

从这几个网站可以看出，可用的字体有很多，像Tahoma,Helvetica Arial，宋体等，一定想知道为什么要做这些选择。

首先得明白几个基本的知识点

Serif 衬线字体

指的是有衬线的字体，又称为“有衬线体”（中文惯用名称“白体”），而与之相对的，没有衬线的称为“无衬线体”（中文惯用“黑体”）。衬线指的是字形笔画末端的装饰细节部分。无衬线字体在西文中习惯称sans-serif，其中sans为法语的“无”的意思；而另外一些人习惯称grotesque（德语作grotesk）或“哥特体”，把衬线体称为“罗马体”，但是这些词已经不是很常用了，只保留于字体名称中。这是来自于一段百科的知识，其实用一个图片就可以分出来。

Sam MY NAME任我行

上面字母N上下出现的短线就是所谓的衬线，所以这些字体都被称为衬线体，主要的衬线体有Time New Roman、Georgia、宋体。

衬线体主要用在印刷品或者出版物的正文内容。

Sans-serif 非衬线体

无衬线字体比较圆滑，线条一般粗细均匀。比较适合用作艺术字、标题等。因为无衬线字体通常粗细比较均匀，所以在小字体显示的时候，可读性会降低，容易引起视觉疲劳。
常见的无i衬线字体有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圆、隶书等等。

关于衬线字体与非衬线体的经典文章谈谈网页设计字体

关于各种字体的选择与设置的经典文章默认Web字体样式

web字体衬线字体与非衬线字体区别字体扫盲相关推荐

衬线字体和非衬线字体区别
衬线字体和非衬线字体区别一.总结 1.衬线字体(宋体):见名知意,就是比划有粗有细,非衬线字体所以字的所有比划的都是一样粗细(幼圆) 二.衬线字体和非衬线字体区别衬线体棱角分明,长文阅读比较舒服. ...
win10 设置默认字体大小字体变大问题非缩放恢复字体大小
前几天远程控制笔记本,但是笔记本盖子是关着的,不知道怎么回事发现字体异常的大,缩放设置不起作用. 解决方法: 修改注册表 HKEY_CURRENT_USER\Control Panel\Desktop ...
衬线字体和无衬线字体区别_字体，字体和字体系列有什么区别？
衬线字体和无衬线字体区别 Since the majority of written words are now produced in one digital form or another, fo ...
衬线字体和无衬线字体是什么_你的字体和意识形态是什么
衬线字体和无衬线字体是什么 We already know that fonts can evoke emotional responses, but a new study shows that p ...
CSS非布局样式-字体
本文内容整理于慕课网视频教程对于CSS中的字体属性(font-family),有几个方面的知识需要了解. 一:字体的分类有两个类型的名称可用于分类字体: 字体族名称(family-name) 族类 ...
[css] 假如设计稿使用了非标准的字体，你该如何去实现它？
[css] 假如设计稿使用了非标准的字体,你该如何去实现它? 协商解决, 如果是重要信息, 如logo等, 使用图片, iconfont. 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易 ...
Web字体(【iconfont.cn】引用在线字体)@font-face属性的使用以及字体格式详解
服务器字体的设置: ✔引用在线字体.(了解) ✔下载到本地使用(推荐) @font-face是CSS3新增的属性,用于定义服务器字体.通过@font-face属性,开发者可以在用户计算机未安装字体时, ...
OLED非等宽字体格式
OLED非等宽字体格式陈拓 2021/07/02-2021/07/07 1. 概述用Arduino IDE进行ESP32和ESP8266开发时可以使用内置字体: 这3种字体都是非等宽的,在OLED ...
零基础学习WEB前端开发(十六)：font-family字体系列
一.基本语法 font-family 二.演示 <!DOCTYPE html> <html lang="en"> <head><meta ...

最新文章

热门文章