精华内容
下载资源
问答
  • 对于经常接触字体的前端开发者来说,引入字体可能是一个“技术活”——不同的字宽、字重以及样式的字体都有可能需要我们单独引入。以MacOS系统内置的“苹方”字体为例,自带“极细(Ultra Light)”、“纤细(Thin)”、...

    对于经常接触字体的前端开发者来说,引入字体可能是一个“技术活”——不同的字宽、字重以及样式的字体都有可能需要我们单独引入。

    以MacOS系统内置的“苹方”字体为例,自带“极细(Ultra Light)”、“纤细(Thin)”、“细(Light)”、“常规(Regular)”、“中黑(Medium)”、“中粗(Semibold)”六种字重,占用体积80M。对于这样的系统字体而言,我们使用时并无需引入,只需设置字体集即可,无需考虑字体引入的速度问题。

    引入非系统自带字体时,我们可以通过压缩字体减少体积后引入,不过压缩只会减少字体支持的字符集,对不同字重、字宽等有需求时,依然需要引入相应的字体。

    eb1fe377d23cab27445177aa2cfecb41.png上图截取自 https://www.foundertype.com/

    可变形字体

    为了应对这些问题,Adobe、Microsoft、Apple、Google联合推出OpenType1.8版本,加入了Variable Fonts(可变形字体)。

    可变形字体看起来像是不同字重、字宽或不同样式的字体的合集,然而,可变形字体通过轴(Axis)来描述字体轮廓点如何变化,以达到不同的字重、字宽或样式的变化,因此仅使用一套轮廓点的可变形字体体积比普通字体集会小。

    可变形字体的秘密 - 变形轴

    可变形字体通过变形轴(variation axis)来描述如何渲染展示字体,可以在css中通过font-variation-settings属性来修改:

    1. wght - 字重(font weight),用于定义笔画的粗细,可变范围1-999,对应font-weight属性。在使用非可变形字体时,我们只能使用100-900并以100步长递增或者normal、bold这样的别名来定义字重。在使用可变形字体时,我们可以用粒度更小的方式修改字重。

    .font-weight-normal {  font-weight: 400;  font-variation-settings: 'wght' 400;}

    af605c674ee4b319bd211c9805e29999.gif

    2. wdth - 字宽(font width),用于定义字形的宽窄,对应font-stretch属性。

    .font-stretch-115 {  font-stretch: 115%;  font-variation-settings: 'wdth' 115; /*设置时不需写上百分比符号。*/}

    5069be6b2b33f50bc335463b2f30e62d.gif

    3. ital - 斜体(italic),用于设置字形展示为正体或斜体,对应font-style: italic。斜体的变化没有中间值,只有正体和斜体的变化。

    .font-italic {  font-style: italic;  font-variation-settings: 'ital' 1;}

    40d6862bc76a5c413079f39f4c32926b.gif

    4. slnt - 倾斜(slant),与ital不一样的是,slnt可以设置字形倾斜的中间值,还可以根据设计设定顺时针或逆时针的倾斜。

    .font-slant-30 {  font-style: oblique 30deg;  font-variation-settings: 'slnt' 30; /*此处也不需设置单位*/}

    f93319e241f9ae57c16b0a8b29e1a52c.gif

    5. opsz视觉尺寸(optical size),与字重的变化不同,视觉尺寸的变化更注重不同字号下字体笔画的变化,保证在不同尺寸下的可能性。

    ba9bdd4c49625690a9fd6524a61a3858.gif

    以上五种变形轴又成为保留轴(registered axis),同时字体设计师可以根据需要创建自定义轴(axis),详情可见 https://docs.microsoft.com/zh-cn/typography/opentype/spec/dvaraxisreg

    如何使用

    已有部分系统字体变成可变字体,不过第三方字体仍需我们引入后才可使用。我们依旧使用@font-face引入:

    @font-face {  font-family: 'source sans';  src: url(SourceSansVariable.woff2) format("woff2-variations"),       url(SourceSans.woff2) format("woff2”);  font-weight: normal;  font-style: normal;}

    前面的字体src表示可变形字体,后面表示普通字体,方便兼容旧的浏览器。

    /*支持的浏览器*/h1 {  font-family: "source sans";  font-variation-settings: "wght" 300, "wdth" 120;}/*不支持的浏览器*/h1 {  font-family: 'source sans';  font-weight: 300;  font-stretch: 120%;}

    上面的两种写法,在支持可变形字体的浏览器上的效果是等同的。我们可以通过CSS Media Query,在支持可变形字体的浏览器上,增强展示效果。

    @supports (font-variation-settings: normal) {  /* TODO */}

    应用

    自可变形字体发布以来,操作系统、浏览器、排版软件、设计师、字体厂商都在积极跟进。

    MacOS 10.13+和Windows 10都已经系统性支持可变字体。

    从caniuse.com数据可以看到,目前主流浏览器均已支持:

    bcb15b5614a6039c6ac7dc18525d2d39.png

    在中文字体方面,方正、文鼎都已推出可变形字体,可根据需要使用。不过相较于中文字体的复杂,英文可变字体相对就丰富多了。https://www.axis-praxis.org/https://v-fonts.com/ 都提供了可变字体的预览。

    动画

    得益于多种变形轴的加入,在设置文字动画时,不再局限于文字的加粗、字号变化等常规操作,现在可以根据设计师的需求,进行文字笔画的变形、圆角等操作。更骚的是,有设计师做出了图形可变字体,再结合动画,可以玩出更多的花样。

    e07d40dd18a6d367f46e8afde0e5e361.gif(来自zycon字体)

    自适应

    页面在前面也介绍过,可以通过视觉尺寸来控制笔画的变化,当然,在不同尺寸的设备上,通过设置不同字重、字宽也可以达到增强可读性的目的。3a553a6cffd36ed068fcdbd206da9d35.png

    @media screen and (max-width: 699px) and (min-width: 460px)h1 {  font-size: 2.5rem;  font-variation-settings: "wght" 500, "wdth" 100;}

    7eeb0648df5a88e06605f28ae3b42daf.png

    @media screen and (min-width: 800px)h1 {  font-variation-settings: "wght" 300, "wdth" 120;  font-size: 3rem;}

    展望

    字体文件体积大、引入文件数量多是目前我们关注到的制约字体在web应用上的一个痛点,在即将到来的5G时代可能并不是一个需要关注的小问题。不过可变形字体确实能够解决排版问题、提升交互,在不久将来,更注重视觉可读性的网站、APP相信将会越来越多。撒花。

    参考文档

    1. https://css-tricks.com/one-file-many-options-using-variable-fonts-web/

    2. https://css-tricks.com/weird-things-variable-fonts-can-do/

    3. https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts/

    4. https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide

    展开全文
  • 本文总结近期 to B 中后台系统 UI 组件设计规范及相关经验...组件规范 Components如下列举常用组件库 UI Library,覆盖 Web 端 Navigation, Buttons, Notifications, Select, Input, Pagination 等 UI 样式及相应代...

    59f8367868dc207628fe169cb03d17e1.png

    本文总结近期 to B 中后台系统 UI 组件设计规范及相关经验。欢迎大家勘别甄误。

    不懂 UI 的交互不是好前端,特别鸣谢 松若章 在设计稿落地过程中的严谨与指点。

    组件规范 Components

    如下列举常用组件库 UI Library,覆盖 Web 端 Navigation, Buttons, Notifications, Select, Input, Pagination 等 UI 样式及相应代码。

    • Ant Design: https://ant.design/components/button/
    • Elements: https://elemefe.github.io/element-react/#/zh-CN/radio
    • iView: https://www.iviewui.com/docs/guide/install-en
    • Material Design: https://material.io/design/components/buttons.html#text-button
    • Semantic UI: https://semantic-ui.com/ (不常用,但经典)

    交互设计师可复用的组件模板

    • Web - Axure UI Kit – Ant Design: AntD Library

    b39a225f4232d4a41b094c17ad82e109.png
    • Web – 不提供设计师可直接编辑的模板,但提供前端可用代码Ant Design Pro: https://pro.ant.design/

    c5be01a500d31a03bd705b6fa08810b8.png
    • 另见:@文冠木 的回答 - 知乎:如何看待 Ant Design 圣诞节彩蛋事件?

    287ad056482ff1f1369f5580af6df01e.png
    • Web – Figma UI Kit - Ant Design System for Figma: https://www.antforfigma.com/

    ffa417220bba5b54b653e61c05fa61e6.png
    • Web – XiaoPiu – XiaoPiu Web: https://www.xiaopiu.com/forum/posts/5b97a67b9c2a3520c7b5c804

    c5a8b91f89fcf1a45752e72c1f44a1e4.gif
    • Mobile - Sketch UI Kit - Ant Design Mobile: https://mobile.ant.design/

    e574a0345ac427e4614af8532414a623.png
    • Mobile – XiaoPiu(一款支持在线PRD,动态交互原型,版本管理,团队协作的工具): https://www.xiaopiu.com/forum/posts/5b97a6909c2a3520c7b5c808

    70c33a2618acfb62647884e8907dcac9.gif
    • Sitemap – Omnigraffle, Sketch, Axure, Affinity, Adobe XD – Ant Design: http://ux.ant.design/

    28bf7ffa8ae9751377eec3fd8836ef86.png
    • User Workflow - XiaoPiu: https://www.xiaopiu.com/forum/posts/5c775d930d830d1b5c17edec

    ca46105c85757ff4b8eb33d739356caa.gif

    视觉规范 Visual Style Guideline:

    1. Typography:

    • 侧重功能性的中后台系统,在字体选用时,为避免 Over Design,以 2 种以内 Font Type 为佳
    • 标题 Text Head 及正文 Text Body,需标注 Font Type, Font Size, Font Weight, Font Color

    bff912249f2f9f932b97adcd6f2ed839.png
    • 免费英文字体选用参考:Google Fonts: 可预览键入的文本效果 https://fonts.google.com/

    6eacfdf2a347e3d061827087e47729ea.png

    2. Iconography:

    • 确保视觉风格的一致性 Consistency: 统一使用线型 Icon 或块状 Icon;统一 Line Weight;针对 Icon 尺寸,将不同形状的 Icon,统一放置于 同一Size 的正方形内,以便于前端同学设定 Icon 的Margin。

    (图)

    • 选择便于前端同学直接使用的开源 Icon 库,以节省开发时间及精力成本。如下列举两种常用 Icon 库:

    (1)Ionicons: https://ionicons.com/

    1b897042cc7e181f7cf30f137e03f895.png

    5a828ac004a2443febc626800cc2ee8a.png

    (由于 Ionicons 的 Icon 是以“字体”的形式储存的,也即是说,它们能被前端用 font-size 及 color 进行大小及颜色的直接调整。e.g. 使用元素的 font-size 样式指定图标的大小:<any style="font-size:100px;"> </any> 补充:经过测试,<md-icon class="icon ion-document-text " style="font-size: 48px;"> </md-icon>有效

    回答参见:ionicons.min.css,怎么看到里面的图标是什么样子的,怎么修改大小和颜色,怎么拿来现成用?

    作者:getU

    (2)Font Awesome: https://fontawesome.com/kits/7f3df10ff1/use?welcome=yes

    4d11c17f91ae656bd5e44643c5997dc4.png

    3. 导出格式 Export Format:当 Ionicons 找不到适合的 Icon,需使用其他平台的 Icon 时,e.g. https://thenounproject.com/ ,或自行绘制 Icon 时,导出格式择优 svg,而非 png。原因:

    1)svg 作为矢量的优势,可适配不同尺寸的屏幕

    2)svg 便于前端同学直接对颜色进行更改

    3)png 作为图片,便不具备以上两种优势

    4)同一元素的一倍图 png 格式大小,比 svg 格式大小,要大很多,如下图所示:

    aa38f7d6ecf7c55770cde5c8549f1765.png

    不同状态 Different Status:对于不同状态下的 Icon,如 Normal, Hover, Active (Clicked), Selected, Disabled, 设计相对应的配色

    4c02faf1f84af8ebfb36ca65472923e0.png

    4. 不透明度 Opacity:为保证同一 Icon 在不同背景色上的呈现效果的统一性 Consistency,择优修改不透明度,而非选择固定色值(前端称“写死颜色”)。

    f3fc3933b21e396f1ddd23227b5a2dc3.png

    2dff4284a8f5e92ae4fd924eb28d4174.png

    5. Padding: 以“内边距”定位内部元素的“相对位置”

    6. Margin: 以“外边距”定位外部元素的“相对位置”

    064eb4cc1c6b876d75c1a55e6de0f351.png

    0bcee228d6a643af8780f2ba772f7a79.png

    7. Weight & Height: 以 Size 确定元素的“绝对大小”

    写死 VS 配置(绝对位置 & 尺寸 VS 相对位置 & 尺寸):

    • 对于信息含量较为固定的组件,可使用“绝对位置 & 尺寸”(写死)。

    e.g. 有 Input 字数限制的输入框,可设定最小尺寸 min-width 和最大尺寸 max-width。超出的部分,横向滑动展现,或以省略号形式展现

    24f5bc232ee63c39eb75df90d3c0eac3.png

    e.g. height 固定的穿梭框 transfer,超出 max-height 的部分,会出现纵向滚动条

    ee064488635c711d687d425945d1492c.png
    • 对于信息含量变动较大的组件,择优选择“相对位置 & 尺寸”(配置):

    e.g. Form(表单):Form 的 height 应随表内信息量多寡,做相应调整,即“信息有多少,表便撑多大”。各元素之间,以 margin 的相对位置来布局。若将 Form 的 height 写死,则会出现内容溢出的情况。当 Form 中内容超出其 max-height,Form 内部将出现纵向滚动条。需特别注意:Form 中 margin 需预留 Form 报错时的空间。如图所示。

    c22b2b3957f749ebf7eb59855a11e2e0.png

    Zoom in Details:

    83bc4cb1871f8357d2f7de2f2d73b9b4.png

    8. Components Status: 包含设计稿中所有组件样式,以及同一组件在不同状态下的不同色值,如Normal, Hover, Active (Clicked / Selected), Disabled时的不同色值(HEX,如有不透明度,需标注 Alpha)

    *** 注:需考虑同一组件和文本在不同深浅背景上的不同呈现效果:

    (1) 分别为深浅色背景设计不同配色(前端颜色写死) :该方案适用于背景的深浅色值对比度差别大的情况,以保证组件及字体的可读性。(图)

    d71dbcabaae3a74c91a86fbc83bde6e8.png

    8aea53545d405ed78809f0cd55a425cb.png

    (2)组件或文本仍保持相同不透明度(Opacity):该方案适用于背景的深浅色值对比度差别小的情况,从而实现同一组件或文本在不同背景上,风格的一致性,使其与背景色自然的融合。(图)

    0da3f1140676d3ac0c23ff1fe5541a06.png

    23c1e7cb456a0b7105ce89eab183831e.png

    60b3b8d07259d90fc21ded1b35d0b473.png

    9. 开发者工具 Inspector:

    • 查看 Web 的 Font Type, Size, Color, Margin, Padding等

    c5496e0b6f5f901672187709e0ba4b71.png

    568b94c3a6361afb54ca0c9ed122da84.png
    • 查看不同尺寸屏幕的呈现效果(图)

    beece18a0b0d684fe42aba2baef4812a.png
    • 查看 Animation,且可慢速播放(图)

    24f50d617375d711cd5ad9398b2ca24e.png

    ba976670b18f89d76fb7701f99d1ab7e.png

    10. 浅色模式 与 深色模式下的层级关系

    • 浅色模式:以阴影进行不同层级的区分

    8aea53545d405ed78809f0cd55a425cb.png
    • 深色模式:以灰度拉开不同层级的层次:灰度越低,层级越近

    d71dbcabaae3a74c91a86fbc83bde6e8.png

    学术背景:加州艺术学院(CCA)人机交互(HCI)笔者网站:ritalei.com

    欢迎技术交流与知识勘误 :)

    展开全文
  • web设置字体粗细css Web安全字体 (Web Safe Fonts) Web safe fonts are fonts that are included with most operating systems, the implication of such high availability is that a designer can expect ...

    web设置字体粗细css

    Web安全字体 (Web Safe Fonts)

    Web safe fonts are fonts that are included with most operating systems, the implication of such high availability is that a designer can expect typography involving web safe fonts to appear exactly as intended to most users. Below are non-exhaustive lists of some fonts that are considered web safe at the time of writing, categorized by CSS generic font families.

    Web安全字体是大多数操作系统随附的字体,这种高可用性的含义是设计人员可以期望涉及Web安全字体的排版与大多数用户的意图完全一致。 以下是按CSS通用字体系列分类的在撰写本文时被认为是网络安全的某些字体的非详尽列表。

    Web safe serif fonts:

    Web安全衬线字体:

    • Georgia

      佐治亚州
    • Times New Roman

      英语字体格式一种

    Web safe sans-serif fonts:

    Web安全无衬线字体:

    • Arial

      Arial
    • Tahoma

      塔豪玛
    • Trebuchet MS

      Trebuchet MS
    • Verdana

      Verdana

    Web safe monospaced fonts:

    Web安全等宽字体:

    • Courier New

      快递新

    It is worth noting that font stacks with fallback options including a generic font family should still be used even if your design uses only web safe fonts. For example:

    值得注意的是,即使您的设计仅使用网络安全字体,仍应使用带有回退选项的字体堆栈(包括通用字体系列)。 例如:

    p {
      font-family: Tahoma, Arial, sans-serif;
    }

    Web字体注意事项 (A Note on Web Fonts)

    Just because some fonts are safer than others does not mean you should confine your designs to using only web safe fonts. Modern designs with CSS can also take advantage of web fonts to ensure consistent typography across operating systems.

    仅仅因为某些字体比其他字体更安全,并不意味着您应该将设计限制为仅使用网络安全字体。 使用CSS的现代设计还可以利用Web字体来确保跨操作系统的一致排版。

    有关字体的更多信息: (More info on fonts:)

    翻译自: https://www.freecodecamp.org/news/web-safe-fonts/

    web设置字体粗细css

    展开全文
  • css字体加粗_CSS字体

    2020-08-31 20:24:11
    css字体加粗At the dawn of the web you only had a handful of fonts you could choose from. 在网络诞生之初,您只有少数几种字体可以选择。 Thankfully today you can load any kind of font on your pages. ...

    css字体加粗

    At the dawn of the web you only had a handful of fonts you could choose from.

    在网络诞生之初,您只有少数几种字体可以选择。

    Thankfully today you can load any kind of font on your pages.

    值得庆幸的是,今天您可以在页面上加载任何字体。

    CSS has gained many nice capabilities over the years in regards to fonts.

    多年来,CSS在字体方面获得了许多不错的功能。

    The font property is the shorthand for a number of properties:

    font属性是许多属性的简写:

    • font-family

      font-family

    • font-weight

      font-weight

    • font-stretch

      font-stretch

    • font-style

      font-style

    • font-size

      font-size

    Let’s see each one of them and then we’ll cover font.

    让我们看看它们中的每一个,然后我们将介绍font

    Then we’ll talk about how to load custom fonts, using @import or @font-face, or by loading a font stylesheet.

    然后,我们将讨论如何使用@import@font-face或通过加载字体样式表来加载自定义字体。

    font-family (font-family)

    Sets the font family that the element will use.

    设置元素将使用的字体系列

    Why “family”? Because what we know as a font is actually composed of several sub-fonts. which provide all the style (bold, italic, light..) we need.

    为什么是“家庭”? 因为我们所知道的字体实际上是由几个子字体组成的。 提供我们需要的所有样式(粗体,斜体,浅色..)。

    Here’s an example from my Mac’s Font Book app - the Fira Code font family hosts several dedicated fonts underneath:

    这是我Mac的Font Book应用程序中的一个示例-Fira Code字体家族在下面托管了几种专用字体:

    This property lets you select a specific font, for example:

    此属性使您可以选择特定的字体,例如:

    body {
      font-family: Helvetica;
    }

    You can set multiple values, so the second option will be used if the first cannot be used for some reason (if it’s not found on the machine, or the network connection to download the font failed, for example):

    您可以设置多个值,因此,如果由于某种原因无法使用第一个选项(例如,在计算机上找不到该选项,或者下载字体的网络连接失败),则将使用第二个选项:

    body {
      font-family: Helvetica, Arial;
    }

    I used some specific fonts up to now, ones we call Web Safe Fonts, as they are pre-installed on different operating systems.

    到目前为止,我使用了一些特定的字体,我们将其称为Web安全字体 ,因为它们已预先安装在不同的操作系统上。

    We divide them in Serif, Sans-Serif, and Monospace fonts. Here’s a list of some of the most popular ones:

    我们将它们分为Serif,Sans-Serif和Monospace字体。 以下是一些最受欢迎的列表:

    Serif - Georgia - Palatino - Times New Roman - Times

    Serif-乔治亚州-Palatino-时代New Roman-时代

    Sans-Serif - Arial - Helvetica - Verdana - Geneva - Tahoma - Lucida Grande - Impact - Trebuchet MS - Arial Black

    Sans-Serif -Arial-Helvetica-Verdana-日内瓦-Tahoma-Lucida Grande-冲击-Trebuchet MS-Arial Black

    Monospace - Courier New - Courier - Lucida Console - Monaco

    Monospace-快递-快递-Lucida Console-摩纳哥

    You can use all of those as font-family properties, but they are not guaranteed to be there for every system. Others exist, too, with a varying level of support.

    您可以将所有这些都用作font-family属性,但不能保证它们在每个系统中都存在。 其他人也存在不同程度的支持。

    You can also use generic names:

    您也可以使用通用名称:

    • sans-serif a font without ligatures

      sans-serif没有连字的字体

    • serif a font with ligatures

      serif字体带连字

    • monospace a font especially good for code

      monospace字体,特别适合代码

    • cursive used to simulate handwritten pieces

      cursive用于模拟手写作品

    • fantasy the name says it all

      fantasy这个名字说明了一切

    Those are typically used at the end of a font-family definition, to provide a fallback value in case nothing else can be applied:

    这些通常用于font-family定义的末尾,以提供备用值,以防万一无法应用其他任何方法:

    body {
      font-family: Helvetica, Arial, sans-serif;
    }

    font-weight (font-weight)

    This property sets the width of a font. You can use those predefined values:

    此属性设置字体的宽度。 您可以使用这些预定义的值:

    • normal

      正常
    • bold

      胆大
    • bolder (relative to the parent element)

      粗体(相对于父元素)
    • lighter (relative to the parent element)

      更轻(相对于父元素)

    Or using the numeric keywords

    或使用数字关键字

    • 100

      100
    • 200

      200
    • 300

      300
    • 400, mapped to normal

      400,映射为normal

    • 500

      500
    • 600

      600
    • 700 mapped to bold

      700映射为bold

    • 800

      800
    • 900

      900

    where 100 is the lightest font, and 900 is the boldest.

    其中100是最浅的字体,而900是最粗体。

    Some of those numeric values might not map to a font, because that must be provided in the font family. When one is missing, CSS makes that number be at least as bold as the preceding one, so you might have numbers that point to the same font.

    其中一些数字值可能无法映射到字体,因为必须在字体系列中提供该值。 如果缺少一个,CSS将使该数字至少与前一个数字一样大胆,因此您可能会有指向相同字体的数字。

    font-stretch (font-stretch)

    Allows to choose a narrow or wide face of the font, if available.

    允许选择字体的窄字体或宽字体(如果有)。

    This is important: the font must be equipped with different faces.

    这很重要:字体必须配备不同的字体。

    Values allowed are, from narrower to wider:

    允许的值从窄到宽:

    • ultra-condensed

      ultra-condensed

    • extra-condensed

      extra-condensed

    • condensed

      condensed

    • semi-condensed

      semi-condensed

    • normal

      normal

    • semi-expanded

      semi-expanded

    • expanded

      expanded

    • extra-expanded

      extra-expanded

    • ultra-expanded

      ultra-expanded

    font-style (font-style)

    Allows you to apply an italic style to a font:

    允许您将斜体样式应用于字体:

    p {
      font-style: italic;
    }

    This property also allows the values oblique and normal. There is very little, if any, difference between using italic and oblique. The first is easier to me, as HTML already offers an i element which means italic.

    此属性还允许值obliquenormal 。 很少有,如果有的话,使用之间的差异italicoblique 。 第一个对我来说比较容易,因为HTML已经提供了一个i元素,它表示斜体。

    font-size (font-size)

    This property is used to determine the size of fonts.

    此属性用于确定字体的大小。

    You can pass 2 kinds of values:

    您可以传递2种值:

    1. a length value, like px, em, rem etc, or a percentage

      长度值,例如pxemrem等,或百分比

    2. a predefined value keyword

      预定义的值关键字

    In the second case, the values you can use are:

    在第二种情况下,可以使用的值为:

    • xx-small

      xx小
    • x-small

    • small

    • medium

    • large

    • x-large

      x大
    • xx-large

      xx大
    • smaller (relative to the parent element)

      较小(相对于父元素)
    • larger (relative to the parent element)

      更大(相对于父元素)

    Usage:

    用法:

    p {
      font-size: 20px;
    }
    
    li {
      font-size: medium;
    }

    font-variant (font-variant)

    This property was originally used to change the text to small caps, and it had just 3 valid values:

    此属性最初用于将文本更改为小写,并且只有3个有效值:

    • normal

      normal

    • inherit

      inherit

    • small-caps

      small-caps

    Small caps means the text is rendered in “smaller caps” beside its uppercase letters.

    小写大写表示文本以大写字母旁边的“小写大写”呈现。

    font (font)

    The font property lets you apply different font properties in a single one, reducing the clutter.

    font属性使您可以在一个字体中应用不同的字体属性,从而减少混乱。

    We must at least set 2 properties, font-size and font-family, the others are optional:

    我们必须至少设置2个属性, font-sizefont-family ,其他属性是可选的:

    body {
      font: 20px Helvetica;
    }

    If we add other properties, they need to be put in the correct order.

    如果我们添加其他属性,则需要以正确的顺序放置它们。

    This is the order:

    这是命令:

    font: <font-stretch> <font-style> <font-variant> <font-weight> <font-size> <line-height> <font-family>;

    Example:

    例:

    body {
      font: italic bold 20px Helvetica;
    }
    
    section {
      font: small-caps bold 20px Helvetica;
    }

    使用@font-face加载自定义字体 (Loading custom fonts using @font-face)

    @font-face lets you add a new font family name, and map it to a file that holds a font.

    @font-face允许您添加新的字体系列名称,并将其映射到包含字体的文件。

    This font will be downloaded by the browser and used in the page, and it’s been such a fundamental change to typography on the web - we can now use any font we want.

    该字体将由浏览器下载并在页面中使用,这是对网络排版的根本改变-我们现在可以使用所需的任何字体。

    We can add @font-face declarations directly into our CSS, or link to a CSS dedicated to importing the font.

    我们可以将@font-face声明直接添加到我们CSS中,或链接到专用于导入字体CSS。

    In our CSS file we can also use @import to load that CSS file.

    在我们CSS文件中,我们还可以使用@import加载该CSS文件。

    A @font-face declaration contains several properties we use to define the font, including src, the URI (one or more URIs) to the font. This follows the same-origin policy, which means fonts can only be downloaded form the current origin (domain + port + protocol).

    @font-face声明包含一些用于定义字体的属性,包括src ,字体的URI(一个或多个URI)。 这遵循同源策略,这意味着只能从当前源(域+端口+协议)下载字体。

    Fonts are usually in the formats

    字体通常采用以下格式

    • woff (Web Open Font Format)

      woff (Web开放字体格式)

    • woff2 (Web Open Font Format 2.0)

      woff2 (网络开放字体格式2.0)

    • eot (Embedded Open Type)

      eot (嵌入式开放式)

    • otf (OpenType Font)

      otf (OpenType字体)

    • ttf (TrueType Font)

      ttf (TrueType字体)

    The following properties allow us to define the properties to the font we are going to load, as we saw above:

    如下所示,以下属性使我们能够定义将要加载的字体的属性:

    • font-family

      font-family

    • font-weight

      font-weight

    • font-style

      font-style

    • font-stretch

      font-stretch

    性能说明 (A note on performance)

    Of course loading a font has performance implications which you must consider when creating the design of your page.

    当然,加载字体会影响性能,在创建页面设计时必须考虑这些影响。

    翻译自: https://flaviocopes.com/css-fonts/

    css字体加粗

    展开全文
  • 最近做项目遇到一个问题,公司的小程序内部要嵌入H5页面,结果这个字体加粗在网页里面显示是正常的,在ios里面显示也是正常的,就是在Android上显示是不正常的,字体显示不加粗,网上搜了一圈,找到了答案。...
  • 移动端字体加粗的解决方案

    千次阅读 2019-01-28 18:13:04
    在移动端无法加粗字体应该是前端和设计的一个经常发生争执的点,在这里列举两种本人的解决方案 一、更换字体 这个方案应该是现在比较多的方案,直接使用较粗的字体,自然可以实现加粗,不过这个方法会增加项目重量,...
  • 字体取消加粗

    2020-08-03 12:58:36
    默认字体太粗,不加粗 font-weight: 400;
  • 导读CSS字体属性定义字体加粗,大小,文字样式。serif和sans-serif字体之间的区别在计算机屏幕上,sans-serif字体被认为是比serif字体容易阅读CSS字型在CSS中,有两种类型的字体系列名称:通用字体系列 - 拥有相似...
  • web安全字体

    2016-05-02 19:08:00
    一个web字体是字形的集合,且每个字形是一个描述了一个字母亦或符号的矢量图。 所以,一个字体文件的大小由两个因素决定:每个字形矢量路径的复杂程度和每个字体所包含的字形数量。 例如,Open San...
  • 原标题:web前端基础教程:各种html字体标记源码(加粗、斜体、大小等)各种html字体标记Creation of Webpage Creation of ebpage Creation of ebpage Creation of ebpage Creation of Webpage 字母均以固定宽度显示。...
  • web设置字体粗细cssFont variations is a new set of features defined as part of the OpenType specification. It allows for font files to contain multiple variation of a font within a single file, called ...
  • html怎么加粗字体?本篇文章给大家带来的内容就是介绍html怎么设置字体的加粗效果的,让大家了解使用html的标签来加粗字体的具体方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。在之前的...
  • WEB 字体

    2016-07-21 10:59:00
    之前如果想在自己的网站使用某些好看的字体,总是迫不得已得在PS里先把字体图片...幸好CSS3新增了@font-face模块,可以帮助我们轻松解决Web页面中使用优雅字体的方式,而且我们可以根据需要自定义多种字体,但是每个...
  • 但是在css里面没有加粗按钮呀,那么css怎么设置字体加粗呢?下面本篇文章给大家介绍一下,希望对大家有所帮助。css怎么设置字体加粗?一说到在CSS里实现加粗,大家第一反应是不是使用font-weight属性。没错,这是在...
  • 字体标签: 、 、 、、超链接 字体标签特殊字符(转义字符):空格 (non-breaking spacing,不断打空格):大于号(greater than)&:符号&":双引号':单引号©:版权©™:商标™绐:文字绐。其实,#32464是...
  • PS五角星形状使用方法?... html中字体如何实现加粗(方法介绍)字体的修饰美化在一个网页的页面也是很重要的,美化的好的网页会给人带来直观的视觉冲击,今天我就来讲述以下在html中字体加粗是怎...
  • 用css去除粗体名目,html有些标签自带粗体格局,也许使用css格局去除粗体字体造诣。一、去除粗体CSS属性单词font-weight——粗体,加粗名目单词去除勾销加粗粗体样式:font-weight:normal二、常见自带粗体html标签...
  • 800居右对齐已经实现了,怎么实现字体加粗呢 ??谢谢回复讨论(解决方案)像这样的问题,楼主最好是先在网上找找答案!这才是好的学习方法font-weight允许值 normal | bold | bolder | lighter | l00 | 200 | 300 | ...
  • css中可以使用font-weight属性设置文本的粗细,可以使用font-size属性加大字体。font-weight属性设置文本的...每个数字值对应的字体加粗必须至少与下一个最小数字一样细,而且至少与下一个最大数字一样粗。font-siz...
  • JAVA Web 字体样式

    千次阅读 2019-03-16 21:41:20
    正体:normal 斜体:italic 字体加粗:bold
  • web字体相关关键字

    2019-10-21 23:12:19
    <... <head> </head> ...--改变字体背景色 字体颜色 ... 加粗 下划线 倾斜 删除线 --> <span style="background-color:purple;font-size:60px;font-family...
  • HTML中如何将字体加粗-前端入门

    千次阅读 2020-06-28 10:49:39
    b标签和strong标签虽然都是可以让字体加粗,但是实际上它们的意义并不相同,用法也有所不同,下面我们就来详细看看b标签strong标签的用法示例。 b是bold,就是粗体的意思;strong意味着强调 我们在**?或**?中将想要...
  • WEB基础之:CSS字体

    2020-12-13 21:06:11
    font-weight字体加粗4. 字体大小结合使用百分比和 EM5. 字体风格和变形5.1 font-style属性5.2 font-variant属性6. 拉伸和调整字体6.1 font-stretch拉伸字体6.2. font-size-adjust 调整字体7. font属性7.1 典型字体...
  • 字体加粗造成文字抖动

    千次阅读 2018-09-03 19:07:36
    // 伪元素的作用就是撑开宽度,为字体加粗预留宽度 ul>li::after{ display:block; content:attr(title); font-weight:bold; visibility:hidden; height:1px; color:transparent; margin-bottom:-1px; ...
  • 下面是一些基本的关于字体的规则,特别适用于Web字体。 原文地址:creativebloq译者:特赞Tezign 顺便附上一个神器:《前端工程师的菜!姗姗来迟的中文WEBFONT(附神器推荐)》 印刷字体是静态的,而网页...
  • CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)
  • Web前端——字体规范

    2017-11-12 19:35:00
    字体规范 ...2 字体大小:在网页中中文应首选使用宋体,英文和数字首选使用verdana和arial两种字体,一般使用中文宋体的9pt和11pt或12px和14.7px这是经过优化的字号,黑体字或者宋体字加粗时,一般选...
  • web_day5_字体相关

    2019-06-06 10:03:00
    字体相关属性---字体大小,字体加粗 定义字体大小 font-size : 字体大小 50px 定义字体颜色 color:字体颜色 定义字体是否加粗 font-weight :字体是否加粗 bold为加粗 定义字体类型 font-family:“微软雅黑...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,850
精华内容 5,140
关键字:

web加粗字体