CSS字体相关属性在网页设计中,字体是一个非常重要的元素。正确选择和使用字体可以使网页更加美观易读和易于理解。CSS提

font-family指定字族名称或通用族名称的优先级列表。

族类就是不同字体类型,例如阿里巴巴普惠体、方正新书宋、站酷酷黑体等。而这些众多字体又可分为衬线体和无衬线体。

基本字族包括细体、标准、粗体、斜体,值得注意的是,斜体字常用在引用文本上,代表“本段文字引用的是另一个著作”的含义。

通用字族名称表如下:

注意:

font-weight属性设置字体的粗细或粗体(字重)。

根据CSSFontsModuleLevel4规范(以下简称CFML4),相对粗细相对于父元素font-weight的粗细如下表:

一般都有细体、正常、粗体三种基本字族。在应用场景上,通常细体多用于超大号字体;「正常」用于正文内容;「粗体」表示强调,多用于标题。

知识点:在进行界面设计时,不要用软件自带的文本加粗,它不仅破坏了字体本身的美感,还改变了文字原本的字宽,小字体下会模糊不清,合理的方式是使用字体本身的字重来控制粗细。

字重超细的字体要谨慎使用。如果你设计的文本是装饰性倒还好,如果是需要用户能清晰阅读的,就要特别慎重,能不用就不用,否则在部分低分辨率的手机屏幕上看起来会非常糟糕。

绝对大小关键字与正常字体大小的比例:

我们在做设计时,字号的单位最好使用一个基数作为倍增,如2、4、6、8、10或者3、6、9、12。但其实我们在做移动端设计时,单位需要遵循偶数原则,因为开发中的单位是以一倍图的基数来进行计算。那么其实在制定字体规范中,使用2为单位会导致字号过多,且2号字体的差异化不大。所以在字号方面我们使用4作为单位是比较合适的:一是适配后在@2x跟@3x不会出现半像素,二是使用4为单位,能满足字体大小的均衡。

font-style属性用于选择当前字体的正常或者斜体样式。斜体字体本质上通常是草体,比无样式字体使用更少的水平空间。

对于oblique[angle[anglerange]],可以参考MDN的描述:

如果所选字体族中有一个或多个斜面可用,则会选择与指定角度最匹配的斜面。如果没有可用的倾斜面,浏览器将通过将正常面倾斜指定的量来合成字体的倾斜版本。有效值是-90deg到90deg的度数值(包括-90deg和90deg)。如果未指定角度,则使用14度的角度。正值倾斜到线的末端,而负值倾斜到线的开始。

通常,对于14度或更大的所需角度,优选更大的角度;否则,更小的角度是首选的。

注意:如果oblique不可用,会回退到italic字体。

font-synthesis属性控制浏览器可以合成哪些缺失的字体(粗体、斜体或小大写)。在需要用到font-family的某个字体,但这个字体不存在时,就可以通过这个属性控制用户代理是否合成对应的字体。

比如设置了font-style:italic;但是font-family指定的字体当中没有斜体字体,那么就可以通过font-synthesis:style;让用户代理去合成斜体字体。

简单了解一下这三个属性:分别表示当缺少粗体、斜体和小型大写字体时,是否控制浏览器合成对应的字体,其取值均为auto和none。

大多数标准西方字体包括斜体和粗体变体,某些字体包括小写字母变体。但是用于中文、日文、韩文和其他标文的字体往往不包含这些变体,合成它们可能会影响文本的易读性。可以关闭浏览器的默认字体合成。

font-stretch属性用于从font-family中选择正常的、压缩的或拉伸(横向)的字体。

值为百分比时不允许为负,其中关键字值与百分比值的对应关系如下:

与font-weight属性类似,为font-stretch的值由font-family决定。如果font-family指定的字体没有完全匹配的值的字体时,font-stretch小于100%的值映射到较窄的面,大于或等于100%的值映射到较宽的面。

注意:该属性生效的前提是字族中有压缩或拉伸的字体。

样式字体特性有两类:

font-variant-ligatures属性控制在其应用的元素的文本内容中使用哪些连字和上下文形式。

对于缺少给定字符的下标或上标字形的OpenType字体,用户代理会回退合成适当的下标和上标字形。

注意:由于一些限制,不建议在用户代理样式表中使用font-variant-position。应该在下标或上标只包含指定字体支持的很小范围的字符的情况下使用它。

font-variant-caps属性控制选择用于小写或小写字母或标题的备用字形。

小型大写字母是字符选项的一种,这个选项比较特殊,就是大写字母在字号一样的情况下,与小写字母一样高,外形与原来保持一致。

font-variant-numeric属性控制数字、分数和序号标记的备用字形的使用。

对于任何给定的字符,除了该字符的默认字形外,字体还可以提供各种备选字形。font-variant-alternates属性提供对这些替代符号的选择的控制。

font-variant-east-asian属性控制东亚文本中的字形替换和大小调整。

font-variant-emoji属性控制选择某些表情符号代码点时是使用表情符号表示还是文本表示。只影响Unicode列出的用于Unicode表情符号表示序列的代码点,对其他字符没有影响。,但可能会影响会影响字体回退。

font-variant:normal|none|[font-variant-ligatures||font-variant-caps||font-variant-alternates||font-variant-numeric||font-variant-east-asian||font-variant-position||font-variant-emoji]注意:如果font-variant值为none,相当于是将font-variant-ligatures的值设置为none,将其他手绘属性的值设置为normal值。

font-optical-sizing属性设置文本渲染是否针对不同的尺寸进行优化。。

在CFML4中规定:

当不是由字体直接执行光学大小时,用户代理不能合成光学大小。

用户代理不能为“opsz”轴选择不被用于呈现文本的字体所支持的值。这可以通过将选定值夹紧到字体支持的范围来实现。

font-variation-settings属性通过指定要更改的特征的四个字母轴名称及其值,提供提供对OpenType或TrueType字体变体的低级控制。

font属性是font-style、font-variant、font-weight、font-stretch、font-size、line-height和font-family等属性的简写(上述各子属性的顺序也是在font属性指定各子属性时的顺序)。未指定的属性一致使用其默认值。

font的值还可以是单个系统字体名称,名称如下:

系统字体只能作为一个整体设置,其字体族、大小、粗细、样式等都是同时设置的,并且只在第一个值位置有效。同时,系统字体只能用font属性指定,不能使用font-family。

font-feature-settings属性提供对OpenType字体特性的低级控制。

值为整数时,必须大于等于0。值为0表示该功能已禁用。对于布尔特性,值为1则表示启用该特性。对于非布尔特性,值为1或更大将启用要素并指示要素选择索引。值on与1同义,off与0同义。如果省略该值,则默认值为1。

font-kerning属性控制使用字体中包含的调整数据的度量字距。字距调整是对字形间距的上下文调整。对于不包含字偶间距调整数据的字体,将没有可见效果。

font-language-override属性允许作者显式指定字体的语言系统,重写内容语言隐含的语言系统。

全角和半角指的是输入的英文字母或数字的大小,全角输入的英文字母及数字是正常汉字的一半,全角输入的和正常汉字等大。一个汉字占两个英文字符的位置,一个英文字符所占的位置称为半角,把一个汉字所占的位置称为全角。

通常情况下,英文字母、数字、符号等都是半角字符。半角和全角主要是针对标点符号来说的,因为正常情况下没有打全角英文的需求。

在设计作品时也一定要记得中文搭配全角符号,英文使用半角符号。否则会出现诸如“你好.”或者“thanks。”这样的错误。可按键盘capslock键切换全角和半角。这个小知识点虽然非常基础,却也是设计中经常出错的地方。

THE END
1.方正细黑简体字体下载,探索与应用指南会计服务方正细黑简体字体的应用 随着科技的不断发展,字体在我们的日常生活和工作中扮演着越来越重要的角色,方正细黑简体字体因其独特的风格和广泛的应用场景而备受关注,本文将介绍方正细黑简体字体的特点、下载方式以及在各个领域的应用。 方正细黑简体字体的特点 http://www.hbstlaw.com/post/14832.html
2.7个技巧让你的字体设计拉满细节感!上图的两种衬线则比较适合文雅一点的字体。圆角处理 即把笔画的端点、笔画交叉处、转角等位置做成圆角,圆角比直角给人的感觉更精致,有被修饰过的感觉,当然,圆角并不适合所有字体。当圆角比较大时,文字的调性会偏向于温和、可爱。如果想要减少可爱的感觉,那么就把圆角尽量缩小或者把笔画做细一点。把笔画交叉处断开http://baijiahao.baidu.com/s?id=1714833851064641708&wfr=spider&for=pc
3.免费字体下载!一款极细的透明感现代清爽字体—超极细字型这款字体以“超细”为目的,画出了用尺子描摹圆珠笔的形象。是一种具有无机质、清洁感、透明感的现代清爽字体。 字体特征 本款字体的特点就是字体的线条十分细小,看起来非常精细。通过下面的对比图。我们可以看出超极细体字体的线条是远远细过其他字体的。 尽管字体线条极细,但是字体看起来非常清晰,不会模糊。 字体https://uiiiuiii.com/software/389777.html
4.经验分享:超详细的字体设计方法+案例分析优设网在选定字体的风格趋势后,给字体做相应的视觉梳理。 例如:字与字的间距,笔划之间的间距、整体字形的倾斜角度特殊地方做圆角处理等等。 让整个字体有一个贯穿始终的规则在里头。 掌握字体的肩胛结构,避免大小不一、分布不均、笔画不均等问题。 统一应用笔划、倾斜等规则。鉴于字体形态的趣味性,加入了图形元素来丰富字体https://www.uisdc.com/font-design-method/
5.html中比较细的字体有哪些登录后您可以: 免费复制代码 关注/点赞/评论/收藏 下载海量资源 写文章/发动态/加入社区 立即登录 会员12.12 消息 创作中心 学习中心成长任务 发布 时间: 2023-05-27 22:04:43浏览: 300 Arial Narrow Calibri Light Century Gothic Gill Sans Light https://wenku.csdn.net/answer/8ff9ba5a2d5e4ad3814aec3a3369cfab
6.华康细明体简体下载华康细明体字体下载免费版没有对应的苹果版,点击下载的是:华康细明体字体免费版介绍相关推荐评论(0) 华康谈楷体字体是一款超好用的华康字体,这款字体用笔刚健斩截,字形大方得体整体效果十分出众。常用于广告设计、包装打印等领域。欢迎来到IT猫扑网下载! 华康细明体字体安装说明 1、首先选中你下载的打包字体,并解压你下载的字体压缩包。 https://m.itmop.com/downinfo/164757.html
7.关于字体变细的解决方案一加Ace 3 原神刻晴定制机 今天逛论坛的时候,发现字体变得特别细 切换字体、调整字体粗细都无法解决,后来在小绿书里找到了解决方案,在此分享下: ①打开“设置”→应用→应用管理 ②点击右上角三个点→选择"显示系统应用" ③在搜索框中输入 web ,找到"Android System WebView",点击进入(一般出问题的版本是126) https://bbs.oneplus.com/thread/1631607492083449865
8.最详细的UI文字应用指南(下)系统的字体规范 在上篇文章了解了文字基本属性以后,接下来我们要简单介绍一次有关 iOS、Android 端的文字规范。规范内容主要分为两个方面,一个是使用的字体介绍,另一个是对文字大小的应用。 1. iOS 文字规范 可用字体 在iOS 中中文和英文都有各自的官方字体,中文只有一个字体,那就是 「苹方」,而英文有两个系列https://www.chengzhushuo.com/articlecontent.html?id=764
9.字体设计基础知识整理一般特征:横细竖粗、上紧下松、左紧右松 升部,降部(英文字体) 字体的气质:秀丽、力量、古朴、现代等,需要与整体的气质保持一致。 字体设计的应用场景: 字库字体:常用于正文,一致性、识别性较为重要; 艺术字体:推广、运营、logo、招牌、包装设计等,布局多变,不拘泥于识别性,更多的讲究图形化; https://www.jianshu.com/p/c4008c98fdb7
10.仅为某些部分更改WPF标签中的字体粗细腾讯云开发者社区WPF(Windows Presentation Foundation)是微软的一种用户界面技术,可以用于开发Windows桌面应用程序。它提供了一种灵活且可定制的方式来创建各种各样的图形用户界面,同时支持在应用程序中使用不同字体的粗细。 在WPF中更改标签(Label)中的字体粗细可以通过设置Label控件的FontWeight属性来实现。FontWeight属性用于控制字体的https://cloud.tencent.com/developer/information/%E4%BB%85%E4%B8%BA%E6%9F%90%E4%BA%9B%E9%83%A8%E5%88%86%E6%9B%B4%E6%94%B9WPF%E6%A0%87%E7%AD%BE%E4%B8%AD%E7%9A%84%E5%AD%97%E4%BD%93%E7%B2%97%E7%BB%86
11.如何在Windows11上解决字体显示过于细小和浅色的问题?在Windows 11中,用户可能会遇到字体显示过细或过浅的问题,这不仅影响了阅读的舒适度,也可能对视力造成一定的负担,为了解决这一问题,本文将提供一系列详尽且有效的方法,帮助用户改善字体的显示效果,从而提升整体的使用体验。 调整显示设置中的缩放比例 Windows 11允许用户调整文本、应用及其他项目的缩放比例,以适应不同https://www.kdun.com/ask/1095392.html
12.汉仪细行楷简下载汉仪细行楷简字体官方版下载汉仪细行楷简是汉仪字库中使用率最高的一款简体中文汉字,该字体设计非常的特别,整体偏细,效果有点像钢笔手写体,且结构清晰、风格统一,是介于行书的活泼与楷书的端正风格之间的书法体,可以适用于正文标题、产品设计、平面广告、包装印刷等应用,非常的具有韵味特色! http://www.winwin7.com/soft/21737.html
13.详情页策划设计协议(通用6篇)设计流程一般是这样的:分析人群画像、锁定人群、设立核心主线、设定成交主张、书写文案、描绘场景、拍摄收集素材、设定逻辑、设定颜色搭配、字体应用、初稿。 说到真正落地输出一个详情页的时候,我们要看看详情页是由哪些细小的模块组成的。详情页的组成元素:颜色、字体、人物、静物、符号、阿拉伯数字。 这里尤为重要的是https://www.360wenmi.com/f/filecqc1nm15.html
14.苹方港细体免费字体下载该字体仅限电脑端安装使用,暂不支持手机端直接应用。 温馨提示: 在字体家网站不需要通过任何付费即可下载到的字体文件,该类字体文件是本站收集于网络,本站不享有任何版权,仅提供给本站网友进行字体爱好交流,如您想通过免费下载的字体进行商业用途使用,本站强烈提醒您联系对应厂商或原作者进行版权授权购买,如因为使用https://www.zitijia.com/i/263279009096289337.html
15.字体粗细调节手机软件下载字体粗细调节官方版免费下载v1.03、统一设置字体大小为400,以满足您的需求。 软件功能 1、来86ps软件园下载正式版本的字体粗细调节,页面简单,没有广告哦。 2、自定义字体粗细,适用场景广泛。 3、帮助用户有良好的阅读过程体验。 游戏截图 应用信息 MD5值:3AB828C91C35C0B75CA1068B812619D3 http://www.86ps.com/soft/18841284.html