文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

浅谈衬线体和无衬线体

衬线体 VS 无衬线体 字体是设计中必不可少的组成部分，在恰当的地方正确的使用字体会大幅提升整体设计感与阅读体验，包括实际应用中的字体设计，网页、平面LOGO设计中都处于均广泛使用的状态，在基础字体中就包括了...衬线字体 和 无衬线字体（艺术设计字体暂时不谈）然后这里简单讨论下这两种字体的基本区别以及分别适用的场景等。...更加“严肃、正经”的场景使用该字体（更具中国特色的字体，如宋体、楷体等） 无衬线体 无衬线体（如 sans-serif、微软雅黑、思源黑体）不存在额外的修饰，整体非常简洁，字体的粗细基本统一。...使用无衬线体的设备非常多，因为无衬线体的默认使用多，也为现代字体的演变历程做了铺垫 个人观点 无衬线体通用的特点可以大范围使用，包括但不限于标题正文等场景（如经典的“微软雅黑”字体） 简洁的属性让人看起来很...我感觉衬线字体更具中国风，无衬线体适合现代风，不知道你们是不是这样以为的~ 以上，有问题评论反馈。

53610

谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

(草体) 其实大体上分为衬线字体和无衬线字体，等宽字体中也有衬线等宽和无衬线等宽字体，这 5 个分类是 font-family 的 5 个可用字体系列取值。...sans-serif -- 无衬线字体 sans 的意思是无，sans-serif 也就是无衬线的意思。专指西文中没有衬线的字体，与汉字字体中的黑体相对应。...中文下，无衬线字体就是黑体，黑体字也就是又称方体或等线体，没有衬线装饰，字形端庄，笔画横平竖直，笔迹全部一样粗细。 看看又有哪些常见的无衬线字体。...Verdana 无衬线字体，优点在于它在小字上仍结构清晰端整、阅读辨识容易。...； 最后使用无衬线系列字体 sans-serif 结尾，保证旧版本操作系统用户能选中一款电脑预装的无衬线字体，向下兼容。

1.1K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【CSS】955- 你该知道的字体 font-family

    是一种特定的字体吗？ 字体基础知识 在继续之前，我们先简单回顾关于字体的一些基础知识。 衬线字体与无衬线字体 就 Web 常用的一些字体而言，其实大体上分为衬线字体和无衬线字体。...无衬线字体 -- 关键字为 sans-serif，也就是无衬线的意思。专指西文中没有衬线的字体，与汉字字体中的黑体相对应。...中文下，无衬线字体就是黑体，黑体字也就是又称方体或等线体，没有衬线装饰，字形端庄，笔画横平竖直，笔迹全部一样粗细。 ? 对比着来看： ?...其中，sans-serif 表无衬线字体族，例如， "Open Sans", "Arial" "微软雅黑" 等等。...Roboto Roboto 是为 Android 操作系统设计的一个无衬线字体家族。Google 描述该字体为“现代的、但平易近人”和“有感情”的。

    4.8K20

    Web 字体 font-family 再探秘

    是一种特定的字体吗？ 字体基础知识 在继续之前，我们先简单回顾关于字体的一些基础知识。 衬线字体与无衬线字体 就 Web 常用的一些字体而言，其实大体上分为衬线字体和无衬线字体。...无衬线字体 -- 关键字为 sans-serif，也就是无衬线的意思。专指西文中没有衬线的字体，与汉字字体中的黑体相对应。...中文下，无衬线字体就是黑体，黑体字也就是又称方体或等线体，没有衬线装饰，字形端庄，笔画横平竖直，笔迹全部一样粗细。 ?...其中，sans-serif 表无衬线字体族，例如， "Open Sans", "Arial" "微软雅黑" 等等。...sans-serif 非衬线字体族 monospace 等宽字体，即字体中每个字宽度相同 cursive 草书字体 fantasy 主要是那些具有特殊艺术效果的字体 新增通用字体族关键字 而在 CSS

    2.4K10

    关于Serif与Sans-Serif字体

    比较常见的衬线字体有 Georgia, Garamond, Times New Roman, 中文的宋体等等。 - sans-serif 衬线字体以外的一切字体都是无衬线字体。...所以sans-serif就是无衬线字体。 ? 无衬线字体比较圆滑，线条一般粗细均匀。比较适合用作艺术字、标题等。...同样大小的衬线字体比无衬线字体容易阅读： ? 然后大家可以把报纸翻到头版头条——标题一般都会是各种粗细一致的综艺体或者是中黑体。英文报纸的标题大多也是无衬线的。这个就是应用他们的基本原则。...在文字足够大的情况下，无衬线字体也是同样可读的。而且因为无衬线字体通常有艺术性，因此在显示器上显示通常比较赏心悦目；而且无衬线字体种类比衬线字体多得多，因此选择余地也很大。所以大家尽可以放心去使用。...但是必须保证以下原则：凡是使用无衬线字体的，必须保证其在正文内容中的可读性。否则，使用衬线字体。

    3.1K30

    「css基础」关于字体相关的基础知识（一）

    一、通用字体族 常用的字体族有五种，分别是sans-serif (无衬线体)、serif (衬线体)、monospace (等宽体)、cursive (手写体)和fantasy (幻想体)。...1、衬线体serif 、无衬线体sans-serif 衬线体指的是在文字笔画的端点上所加的装饰线条，因为sans 在法语中代表「无」，所以sans-serif 也就是无衬线体，与衬线字体相反，无衬线体完全抛弃装饰衬线...，而幻想体就是在手写之外，更多了一些装饰或纹路在字体上，大多数的中文预设不支持幻想体，如果设置了，也会自动使用衬线体或无衬线体取代。...1、无衬线体sans-serif Arial、Arial Black、Arial Narrow、Charcoal、Geneva、Impact、Trebuchet MS、Tahoma、Verdana ?...五、 常用的字体属性简介（CSS1、CSS2部分） 以下内容，为CSS排版字体常用到的CSS属性，我先暂且简单罗列，帮助大家进行回顾，对于重点的部分我会在稍后的文章里进行介绍。

    1K30

    serif，sans-serif，monospace，cursive和fantasy

    ，cursive和fantasy，相对常用的是前3个（衬线，无衬线和等宽字体族） 三.特点 serif 衬线字体族 特点： 具有修饰过的笔画，向外展开的或者尖细的末端，或者是带有实际衬线的末端 一笔一划末端...但在大字号下笔画装饰部分可能会显得模糊或带有锯齿 示例： Times New Roman、MS Georgia 宋体、仿宋 衍生： petit-serif 小衬线字体族 末端变化不明显，可以当做无衬线...slab-serif 雕版衬线字体族 末端变化非常明显 sans-serif 无衬线字体族 sans-前缀是法语，发音为/san/，意为“无” 特点： 具有笔画清晰的末端–带有一点或者没有向外展开的，交错笔画...，serif用于打印设备 monospace用于打字机和代码 小字号场景不要用sans-serif，衬线字体更容易辨认 最佳实践： sans-serif是页面首选，无衬线 因为在屏幕显示设备上，衬线会让文字变得难以辨认...serif不适合在线阅读，但打印效果很好，适用于页面打印版 衬线字体在打印的场景更容易阅读，让人更容易清楚区分不同字母。

    2.4K30

    「css基础」关于字体相关的基础知识（一）

    一、通用字体族 常用的字体族有五种，分别是sans-serif (无衬线体)、serif (衬线体)、monospace (等宽体)、cursive (手写体)和fantasy (幻想体)。...1、衬线体serif 、无衬线体sans-serif 衬线体指的是在文字笔画的端点上所加的装饰线条，因为sans 在法语中代表「无」，所以sans-serif 也就是无衬线体，与衬线字体相反，无衬线体完全抛弃装饰衬线...，而幻想体就是在手写之外，更多了一些装饰或纹路在字体上，大多数的中文预设不支持幻想体，如果设置了，也会自动使用衬线体或无衬线体取代。...1、无衬线体sans-serif Arial、Arial Black、Arial Narrow、Charcoal、Geneva、Impact、Trebuchet MS、Tahoma、Verdana 2...五、 常用的字体属性简介（CSS1、CSS2部分） 以下内容，为CSS排版字体常用到的CSS属性，我先暂且简单罗列，帮助大家进行回顾，对于重点的部分我会在稍后的文章里进行介绍。

    1K00

    WecTeam：撸了这么多代码，你真的了解字体吗？

    字体真的只是“系统默认，无从解释”这么简单吗？是产品被忽悠？还是开发在敷衍？二者之间的博弈究竟谁能胜出？学会本文，你就能胜出。 字体分类 常见的字体可以分为两类：衬线体、无衬线体。 ?...常见的衬线体有： •宋体、楷体•Times New Roman 2、sans-serif（无衬线体）：笔划粗细基本一致，只剩下主干，造型简明有力，起源也很晚。适用于标题、广告等，识别性高。...常见的无衬线体有： •黑体•Windows 平台默认的中文字体：微软雅黑（Microsoft Yahei）•Windows 平台默认的英文字体：Arial•Mac & iOS 平台默认的中文字体：苹方（...字体族 CSS 中的字体族可以理解成是某一类字体。常见的字体族可以分为五类： •serif：衬线体。•sans-serif：无衬线体。•monospace：等宽字体。每一个字母所占的宽度是相同的。...操作系统上使用苹果的“苹方”字体，在 Windows 系统上用微软雅黑字体，如果这两个字体都没有，就随便找一个无衬线体进行显示。

    1.3K10

    CSS 字体介绍

    选择合适的字体，对提高网页的美观度和可读性有着举足轻重的作用。本文简要介绍了 CSS 中与字体相关的知识。...指定字体 CSS 的 font-family 命令，指定了网页元素所使用的字体，如 font-family: Georgia, "Times New Roman", "Microsoft...衬线体和无衬线体 所谓"衬线体"（Serif），指的是笔画的末端带有衬线的字体。 一般来说，衬线体装饰性强，往往用于标题；无衬线体清晰度好，往往用于正文。...兼容大部分浏览器，系统的英文字体 衬线字体（Serif Fonts） Georgia, Times New Roman, Times, serif 非衬线字体（Sans-Serif Fonts） Arial...", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", sans-serif; 仿宋（FangSong） 这种字体是衬线体

    3.1K30

    英文字体的选择

    英文字体的分类 英文文字大致分成三类，衬线体，无衬线体和其他字体。其他字体包括哥特体，手写体和装饰体，这些字体在我们工作中使用相对较少，所以重点介绍衬线体和无衬线体两大类。 ?...Grotesque是最早出现的无衬线体，所以保留了一些衬线体的特征，比如小写字母g的写法不一样，数字1下方有粗衬线。...适合长文阅读的文字 无衬线体中适合长文阅读的文字一般是Humanist，衬线体中适合长文阅读的文字一般是支架衬线体。下面列几个个人觉得比较适合排长文的字体。...字体应该怎么搭配 字体搭配总体的原则是一致性加对比性。一致性指的是选择调性和情绪一致的字体。比如现代罗马体搭配几何无衬线体，古典罗马体搭配年代比较久远的无衬线体。...很多字体家族是同时包含称衬线体和无衬线体的，它们在设计初始的时候就有相同的骨架，所以排版起来非常协调。

    3.2K30

    撸了这么多代码，你真的了解字体吗？

    字体真的只是“系统默认，无从解释”这么简单吗？是产品被忽悠？还是开发在敷衍？二者之间的博弈究竟谁能胜出？学会本文，你就能胜出。 字体分类 常见的字体可以分为两类：衬线体、无衬线体。 ?...常见的衬线体有： •宋体、楷体•Times New Roman 2、sans-serif（无衬线体）：笔划粗细基本一致，只剩下主干，造型简明有力，起源也很晚。适用于标题、广告等，识别性高。...常见的无衬线体有： •黑体•Windows 平台默认的中文字体：微软雅黑（Microsoft Yahei）•Windows 平台默认的英文字体：Arial•Mac & iOS 平台默认的中文字体：苹方（...字体族 CSS 中的字体族可以理解成是某一类字体。常见的字体族可以分为五类： •serif：衬线体。•sans-serif：无衬线体。•monospace：等宽字体。每一个字母所占的宽度是相同的。...Mac 操作系统上使用苹果的“苹方”字体，在 Windows 系统上用微软雅黑字体，如果这两个字体都没有，就随便找一个无衬线体进行显示。

    2.2K10

    CSS魔法堂：再次认识font

    本文打算对字体稍微深入一下子网页字体的内容，若有纰漏请大家指正，谢谢！   目录一坨: 二, 字体分类 1. 衬线体(Serif) 2. 无衬线体/非衬线体(Sans-Serif) 3....衬线体（Serif）     衬线是笔画末端的装饰部分，用于更清晰地标明笔触末端，提高辨识率从而提高阅读速度。另外衬线字体感觉会更正统。下图红色部分就是衬线。 ?     ...无衬线体/非衬线体（Sans-serif） ?     网页中英文无衬线字体有Arial,Verdana,Tahoma,Helivetica,Calibri等....注意：10px~12px的衬线字体在屏幕下难以辨认，因此网页中常用无衬线字体而非衬线字体。原因请看解析度说明(下图为10px的Verdana和Times New Roman对比) ? 3....微软雅黑属于无衬线字体，具有以下优点：          1. 作为矢量字体库，而不像中易宋体那样是非黑即白的点阵字体库。

    2.3K100

    中文字体网页开发指南

    FZShuTi 方正姚体：FZYaoti 华文彩云：STCaiyun 华文琥珀：STHupo 华文隶书：STLiti 华文行楷：STXingkai 华文新魏：STXinwei 二、font-family命令 CSS...四、衬线体和无衬线体 所谓"衬线体"（Serif），指的是笔画的末端带有衬线的字体。 就像英文字体一样，中文字体也可以分成"衬线体"和"无衬线体"（San-serif）。...比如，对于繁体字来说，微软正黑（Microsoft JhengHei）是无衬线体，新细明体（PMingLiU）是衬线体。...对于简体字来说，微软雅黑（Microsoft yahei）是无衬线体，宋体（SimSun）是衬线体。 一般来说，衬线体装饰性强，往往用于标题；无衬线体清晰度好，往往用于正文。...但是，Windows XP没有预装这种字体，这时可以选择黑体（Simhei）替代。不过，黑体比较粗，不应用于字号较小的文字。 （3）仿宋（FangSong） 这种字体是衬线体，比宋体的装饰性更强。

    1.5K40

    字体是网页设计中最重要的细节

    字体的分类和格式 衬线和无衬线 衬线算是一种辅助性的小细节，笼统的谈，太过于抽象，我们来看两个例子： 这两个字体，是有衬线字体，大家可以看到在边角的位置，会多出一些修饰。...但是，这种字体如果设置字体大小太小的话、或者你里文字较远，则会受到衬线影响，分辨不清晰。...这两个字体，就是无衬线字体，没有边角的修饰，令人看起来很整齐光滑，没有毛刺。比较适合用在网页中，让浏览者获取大量的文字信息而不会疲劳。...Times New Roman 是默认的 serif 字体，中文字体的话，是宋体、仿宋之类的字体。 sans serif：无衬线字体。...无衬线 的默认字体，来代替。

    78010

    字体笔记

    因为内容与字体有关，我就借这个机会，整理一下关于字体的笔记。 需要说明的是，下面提到的字体都是指英语字体。中文字体因为各个平台差别太大，所以这里就不考虑了。...1. serif （衬线类） 2. sans-serif（无衬线类） 字母末段带有装饰线的就是serif，反之就是sans-serif。 ?...上图中左边的就是衬线类字体Georgia，右边的就是无衬线类字体Verdana。 一般来说，serif比较庄重，sans-serif相对活泼。...因为serif带有衬线，在小字号下，不如sans-serif清晰，所以serif字体可以用作标题，sans-serif字体可以用作正文。 3....网上已经有人整理出了所有"安全字体"的CSS写法，我把它照抄过来，效果可以看这里。

    1.6K10

    英文字体的选择 - 腾讯ISUX

    英文字体的分类 英文文字大致分成三类，衬线体，无衬线体和其他字体。其他字体包括哥特体，手写体和装饰体，这些字体在我们工作中使用相对较少，所以重点介绍衬线体和无衬线体两大类。 ?...Grotesque是最早出现的无衬线体，所以保留了一些衬线体的特征，比如小写字母g的写法不一样，数字1下方有粗衬线。...适合长文阅读的文字 无衬线体中适合长文阅读的文字一般是Humanist，衬线体中适合长文阅读的文字一般是支架衬线体。下面列几个个人觉得比较适合排长文的字体。...字体应该怎么搭配 字体搭配总体的原则是一致性加对比性。一致性指的是选择调性和情绪一致的字体。比如现代罗马体搭配几何无衬线体，古典罗马体搭配年代比较久远的无衬线体。...很多字体家族是同时包含称衬线体和无衬线体的，它们在设计初始的时候就有相同的骨架，所以排版起来非常协调。

    2.6K50

    小谈中文环境下中文排版的font-family 字体选择

    无宋体、无微软雅黑 iOS Helvetica Neue Heiti SC (黑体) Tahoma(v7.0)、Arial、Verdana、Georgia STHeiti(v7.0)、无宋体、无微软雅黑...Helvetica Neue Hiragino Sans GB  (冬青黑体简体中文) Tahoma、Arial、Verdana、Georgia 宋体、无微软雅黑 各移动设备系统支持情况： 五大类字体...安卓4.0 IOS6.0 WP8 sans-serif（无衬线） 支持 支持 支持 serif（衬线） 支持 支持 支持 monospace（等宽） 支持 支持 支持 fantasy（梦幻） 不支持...sans-serif（无衬线） 支持 不支持 不支持 serif（衬线） 支持 支持 支持 monospace（等宽） 支持 支持 支持 fantasy（梦幻） 支持 支持 支持 cuisive（草体）...chinese_fonts.html http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese

    2.3K100

    即时按需原子 CSS 引擎：比 Tailwind JIT 快 5 倍！ | 开源日报 No.149

    引擎，受到 Windi CSS、Tailwind CSS 和 Twind 的启发，解决了定制化、速度和体积的问题。...以下是该项目的特点和核心优势： 完全可定制：通过预设提供所有功能，没有核心实用程序 无解析、无 AST、无扫描，即时性能（比 Windi CSS 或 Tailwind JIT 快 5 倍） ~6kb min...be5invis/Iosevkahttps://github.com/be5invis/Iosevka Stars: 17.8k License: OFL-1.1 Iosevka 是一个开源的、无衬线...+ 衬线、等宽 + 准比例字体系列，专为编写代码、在终端中使用和准备技术文档而设计。...提供 6 种等宽子系列（无衬线和衬线，每种有 3 种间距：默认 (Default)、终端 (Term) 和 固定 (Fixed)）以及 2 个准比例子系列（Aile (无衬线) 和 Etoile (衬线

    30910
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券