精华内容
下载资源
问答
  • 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

    展开全文
  • 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 ...

    web设置字体粗细css

    Font 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 a variable font. This in turns allows the use of one font file on the web that can achieve multiple font styles.

    字体变化是作为OpenType规范的一部分定义的一组新功能。 它允许字体文件在单个文件中包含字体的多种变体,称为可变字体。 这又允许在网络上使用一个字体文件,该文件可以实现多种字体样式。

    On top of the obvious savings in turns of data that needs to be sent over the wire to display the text on a page, variable fonts enable features such as animating or transitioning font styles and custom font styles, both of which are not possible with static fonts.

    除了可以通过导线发送以在页面上显示文本所需的大量数据转换外,可变字体还支持动画或过渡字体样式和自定义字体样式等功能,而静态字体则无法实现字体。

    Let’s go over some examples of using a variable font, and then break down how to use them on the web today.

    让我们来看一些使用可变字体的示例,然后详细介绍如何在今天的网络上使用它们。

    可变字体示例 (Variable Font Examples)

    Note that you’ll need to use a supporting browser to properly view the examples below.

    请注意,您需要使用支持的浏览器来正确查看以下示例。

    源无变量 (Source Sans Variable)

    Source Sans is a popular free font that now comes with in a variable version. Hover over the text to see how the value for font-weight can be transitioned:

    Source Sans是一种流行的免费字体,现在带有可变版本。 将鼠标悬停在文本上可以查看如何更改font-weight的值:

    See the Pen XWdaGLZ by alligatorio (@alligatorio) on CodePen.

    请参阅CodePen上的alligatorio ( @alligatorio )提供的Pen XWdaGLZ

    And this is achieved using some very simple CSS rules:

    这是通过一些非常简单CSS规则实现的:

    @font-face {
      font-family: 'Source Sans';
      src: url('/assets/fonts/variable/SourceSansVariable-Roman.ttf') format("truetype-variations");
      font-weight: 1 999;
    }
    
    .source-sans, .source-sans2, .source-sans3 {
      font-family: 'Source Sans';
      transition: font-weight .45s ease-out;
    }
    
    .source-sans:hover, .source-sans2:hover {
      font-weight: 999;
    }
    .source-sans3:hover {
      font-weight: 200;
    }


    自定义字体样式 (Custom font styles)

    Here are some examples all using the same font, Decovar, a variable font that defines custom axes and allows for unique and stylized text:

    以下是一些使用相同字体Decovar的示例 ,该字体是定义自定义轴并允许唯一且样式化的文本的可变字体:

    See the Pen RwaZdXX by alligatorio (@alligatorio) on CodePen.

    请参阅CodePen上的alligatorio ( @alligatorio )提供的Pen RwaZdXX

    And here’s the CSS rules used for that:

    这是用于此CSS规则:

    @font-face {
      font-family: Decovar;
      src: url('/assets/fonts/variable/DecovarAlpha-VF.subset.ttf') format("truetype-variations");
    }
    
    .decovar, .decovar2, .decovar3 {
      font-family: Decovar;
    }
    
    .decovar {
      color: var(--green3);
      font-variation-settings: "BLDA" 506.944, "TRMC" 1000, "TRMK" 324.653;
    }
    .decovar2 {
      color: hotpink;
      font-variation-settings: "WMX2" 580.838, "TRMB" 1000;
    }
    .decovar3 {
      color: rebeccapurple;
      font-variation-settings: "TRMF" 159.18, "TRME" 1000;
    }


    Now that you’ve seen some real-life examples, let’s go over some of the concepts and how to make use of variable fonts in your own web pages.

    既然您已经看到了一些真实的示例,那么让我们来看一些概念以及如何在自己的网页中使用可变字体。

    字体轴 (Font Axes)

    Variable fonts define their variations though axes of variation. There are 5 standard axes:

    可变字体通过变体轴定义其变体。 有5个标准轴:

    • ital: Controls the italics. The value can be set using the font-style CSS property.

      ital :控制斜体。 可以使用font-style CSS属性设置该值。

    • opsz: Controls the font’s optical size. The value can be set using the font-optical-sizing CSS property.

      opsz :控制字体的光学尺寸。 可以使用font-optical-sizing CSS属性设置该值。

    • slnt: Controls the slant of the font. The value can be set using the font-style CSS property.

      slnt :控制字体的倾斜度。 可以使用font-style CSS属性设置该值。

    • wght: Controls the font’s weight. The value can be set using the font-weight CSS property.

      wght :控制字体的粗细。 可以使用font-weight CSS属性设置该值。

    • wdth: Controls the font’s width. The value can be set using the font-stretch CSS property.

      wdth :控制字体的宽度。 可以使用font-stretch CSS属性设置该值。

    Fonts can also specify custom axes, and these need to have a 4-letter uppercase name instead of the 4-letter lowercase names of the standard axes. The Decovar font demoed above is a prime example of a font using a multitude of custom axes.

    字体也可以指定自定义轴,并且这些字体必须具有4个字母的大写字母名称,而不是标准轴的4个字母的小写字母名称。 上面演示的Decovar字体是使用多个自定义轴的字体的主要示例。

    The standard axes can be set with well-known CSS properties (e.g.: wdth is set with font-weight), and the new CSS font-variation-settings is used to control the values for axes otherwise.

    可以使用众所周知CSS属性设置标准轴(例如, wdth设置为font-weight ),否则,将使用新CSS font-variation-settings控制轴的值。

    For example, here we define a style for the NobotoFlex variable font:

    例如,在这里我们为NobotoFlex可变字体定义样式:

    h1 {
      font-variation-settings: "BASE" 500, "SPAC" 200, "wght" 322, "HEIG" 456;
    }

    Which could have alternatively been defined like this:

    也可以这样定义:

    h1 {
      font-weight: 322
      font-variation-settings: "BASE" 500, "SPAC" 200, "HEIG" 456;
    }

    It’s a good idea to use the native CSS properties for the axes that have one.

    对具有一个的轴使用本机CSS属性是一个好主意。

    Note that fonts don’t have to implement all 5 standard axes, and instead you should consult the documentation of the font to know what axes you can control.

    请注意,字体不必全部实现5个标准轴,而是应查阅字体的文档以了解可以控制的轴。

    Note also how font-weight can take values anywhere between 1 and 999, compared to the 100-value increments we’re used to.

    还请注意,与我们过去习惯使用100值的增量相比, font-weight如何可以采用介于1到999之间的值。

    通过@ font-face使用可变字体 (Using Variable Fonts with @font-face)

    Using variable fonts on the web involves defining @font-face rules that point to the variable font files. The following is a brief overview of how it’s done, but for there are a few caveats you may want to learn about for cross-browser support.

    在网络上使用可变字体需要定义指向可变字体文件的@ font-face规则 。 以下是其完成方式的简要概述,但是对于跨浏览器支持,您可能需要了解一些注意事项

    Here for example we define two version for the Source Sans font family, one regular and one bold. Both versions make use of the same variable font file, but different font files as a fallback for browsers that don’t support variable fonts:

    例如,在这里我们为Source Sans字体家族定义了两个版本,一个为常规字体,另一个为黑体。 对于不支持可变字体的浏览器,这两个版本都使用相同的可变字体文件,但使用不同的字体文件作为后备:

    @font-face {
      font-family: 'Source Sans';
      src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
      src: url('/path/to/SourceSans.woff2') format("woff2");
      font-weight: 400;
    }
    
    @font-face {
      font-family: 'Source Sans';
      src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
      src: url('/path/to/SourceSansBold.woff2') format("woff2");
      font-weight: 900;
    }

    And it can now be used within your CSS rules as usual:

    现在,它可以照常在您CSS规则内使用:

    h1 {
      font-family: 'Source Sans';
      font-weight: 900;
    }
    
    h2 {
      font-family: 'Source Sans';
      font-weight: 400;
    }


    You can also specify a range in your @font-face rules, to retain the ability to use all the possible values within your regular CSS rules:

    您还可以在@ font-face规则中指定范围,以保留使用常规CSS规则中所有可能值的能力:

    @font-face {
      font-family: 'Source Sans';
      src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
      src: url('/path/to/SourceSans.woff2') format("woff2");
      font-weight: 1 999;
    }

    With the above, we can now use any value between 1 and 999 for the font-weight property. Non-supporting browsers will use a font-weight value of normal.

    通过上面的操作,我们现在可以使用1到999之间的任何值作为font-weight属性。 不支持的浏览器将使用normal的font-weight值。

    可用字体 (Available Fonts)

    You can find and play with most of the currently available variable fonts on V-fonts.com. A few notable Open Source ones are Barlow, Mutador Sans, Source Sans, Amstelvar and Cabin VF.

    您可以在V-fonts.com上找到并使用大多数当前可用的可变字体。 一些Mutador Sans开源软件包括BarlowMutador SansSource SansAmstelvarCabin VF

    Some are also available through Google Fonts as early access fonts.

    有些还可以通过Google字体作为抢先使用字体获得

    TTF转WOFF2 (TTF to WOFF2)

    Font files will often be provided in the TrueType format (ttf), but for the web it’s a much better idea to compress the font file to the WOFF2 format, to save on space. You can use a tool like FontTools to compress a font file as WOFF2. More user-friendly GUI or online tools will surely become available really soon.

    字体文件通常以TrueType格式( ttf )提供,但是对于Web来说,将字体文件压缩为WOFF2格式是一个更好的主意,以节省空间。 您可以使用诸如FontTools之类的工具将字体文件压缩为WOFF2。 肯定会很快提供更多用户友好的GUI或在线工具。

    浏览器支持 (Browser Support)

    Support for variable fonts is already pretty good, so in theory you can start using them today. There are a few caveats with support however, and some things are still being ironed-out for their usage within CSS as part of the CSS Fonts Module Level 4. Here’s a nice summary what’s still in flux at the moment.

    对可变字体的支持已经相当不错了 ,因此从理论上讲,您今天就可以开始使用它们了。 但是,有一些警告需要支持,并且作为CSS Fonts Module Level 4的一部分,仍需要解决一些在CSS中使用它们的问题。 这是一个很好的总结 ,目前仍在变化中。

    资源和工具 (Resources and Tools)

    Here’s some further reading material if you want to expand your understanding of using variable fonts on the web:

    如果您想加深对在网络上使用可变字体的理解,请阅读以下一些阅读材料:

    And here are two tools that allow you to easily test out and find variable fonts:

    这是两个工具,可让您轻松测试并查找可变字体:

    翻译自: https://www.digitalocean.com/community/tutorials/css-variable-fonts

    web设置字体粗细css

    展开全文
  • web页面字体设置

    2013-12-02 12:54:18
    web页面字体设置
  • web字体设置成平方字体When using web fonts we must carefully avoid its hidden pitfalls. To do this designers, frontend developers, DevOps, and authors each have a role to play in creating a great end-...

    web字体设置成平方字体

    When using web fonts we must carefully avoid its hidden pitfalls. To do this designers, frontend developers, DevOps, and authors each have a role to play in creating a great end-user experience.

    使用网络字体时,必须小心避免其隐藏的陷阱。 为此,设计师,前端开发人员,DevOps和作者在创造出色的最终用户体验中均应发挥作用。

    • Designers need to establish font stacks that can realistically be delivered to users over restricted bandwidths.

      设计人员需要建立字体栈,以便可以在有限的带宽上实际交付给用户。
    • Frontend developers need to pay attention to CSS rules that can speed things up.

      前端开发人员需要注意加快速度CSS规则。
    • DevOps needs to make sure font files are fetched at the right time, and cached aggressively once downloaded.

      DevOps需要确保在正确的时间获取字体文件,并在下载后积极缓存。
    • Content authors need to let everyone else on the team know about special glyphs and foreign language character sets that they use.

      内容作者需要让团队中的其他所有人知道他们使用的特殊字形和外语字符集。

    Here are some practical tips and strategies for getting fast accurate typography using real-world network bandwidths.

    这里有一些实用的技巧和策略,可以使用实际的网络带宽来获得快速准确的排版。

    @ font-face规则 (The @font-face rule)

    Let’s begin with a typical example. The designer chooses a typeface for their website articles with a careful eye for readability. The designer then declares the typeface, size, leading, white space, and color using CSS like this:

    让我们从一个典型的例子开始。 设计师为网站文章选择字体时要特别注意可读性。 然后,设计人员使用CSS声明字体,大小,前导,空格和颜色,如下所示:

    article {
    font-family: 'Source Serif Pro', serif;
    font-size: 12pt;
    line-height: 1.4;
    margin: 1rem;
    color: hsl(0,0%,15%);
    background-color: hsl(0,0%,85%);
    }

    In order to implement this, the frontend developer specifies @font-face rules like this:

    为了实现这一点,前端开发人员指定了@ font-face规则,如下所示:

    @font-face {
    font-family: 'Source Serif Pro';
    font-weight: 400;
    font-style: normal;
    font-display: block;
    src: local('SourceSerifPro-Regular'),
    url('/fonts/source-serif-pro-400-latin.woff2')
    format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
    U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
    }
    @font-face {
    font-family: 'Source Serif Pro';
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    src: local('SourceSerifPro-It'),
    url('/fonts/source-serif-pro-400-italic-latin.woff2')
    format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
    U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
    }
    @font-face {
    font-family: 'Source Serif Pro';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: local('SourceSerifPro-Semibold'),
    url('/fonts/source-serif-pro-600-latin.woff2')
    format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
    U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
    }

    At first glance, this looks like an excessive ruleset just for a simple CSS declaration. So let’s examine each property to understand what’s possible.

    乍一看,这看起来像一个过多的规则集,仅用于简单CSS声明。 因此,让我们检查每个属性以了解可能的情况。

    For all three rules, the font-family is the same. It matches the name specified in the CSS declaration.

    对于所有三个规则, font-family是相同的。 它与CSS声明中指定的名称匹配。

    It’s the font-weight and font-style properties that are the telling difference.

    区别在于font-weightfont-style属性。

    • The first rule is used for plain text, it specifies a regular font weight (400) and a normal font style.

      第一条规则用于纯文本,它指定常规字体粗细(400)和常规字体样式。
    • The second rule specifies an italic font style. It will be used by the browser for HTML text marked with the <i> or <em> tags, or with the font-style: italic CSS property.

      第二条规则指定斜体字体样式。 浏览器将使用它来标记带有<i><em>标记或带有font-style: italic CSS属性HTML文本。

    • The third rule specifies a heavier font weight (600). It will be used by the browser for HTML text marked with the <b> or <strong> tags, or with the font-weight: bold CSS property.

      第三条规则指定较重的字体粗细(600)。 浏览器将使用它来标记带有<b><strong>标签或带有font-weight: bold CSS属性HTML文本。

    When the italic and bold typefaces don’t need to be precise, and download times need to be optimized, the second and third rules can be dropped. In that case, the browser will attempt to render its own approximation of italic and bold by simply distorting the outline of the true font. In some cases this may be good enough.

    当斜体和粗体字不需要精确且下载时间需要优化时,可以删除第二和第三条规则。 在这种情况下,浏览器将通过简单地扭曲真实字体的轮廓来尝试呈现其自己的斜体和粗体近似值。 在某些情况下,这可能已经足够了。

    But when the typeface can’t be suitably rendered that way, the frontend developer can still optimize the website for fast downloads by using the font-display property. A value of swap instructs the browser to prerender the text the best it can, then rerender it correctly when the font file becomes available. This makes the text visible to the user sooner, but may cause a small "flash of unstyled text" (FOUT). In the example, the italic and bold rules use this approach.

    但是,当无法以这种方式正确显示字体时,前端开发人员仍然可以使用font-display属性来优化网站以进行快速下载。 swap的值指示浏览器以最佳的方式呈现文本,然后在字体文件可用时正确地呈现文本。 这样可以使用户更早地看到文本,但是可能会引起小的“未样式化文本闪烁”(FOUT)。 在示例中,斜体和粗体规则使用此方法。

    By way of contrast, a value of block instructs the browser to temporarily hold off rendering the text until the font file becomes available. When this happens within a reasonable amount of time it's rendered in its precise form without any FOUT. But if the font file download is delayed too long the browser is supposed to temporarily do the best it can, rerendering if and when the actual font becomes available. In the example, the first rule, for regular plain text, uses this approach.

    相比之下, block值指示浏览器暂时推迟渲染文本,直到字体文件可用为止。 当这种情况在合理的时间内发生时,将以其精确的形式呈现而没有任何FOUT。 但是,如果字体文件下载延迟太长时间,则浏览器应该暂时尽其所能,并在实际字体可用以及何时可用时重新呈现。 在示例中,对于常规纯文本,第一个规则使用此方法。

    Two other font-display values are possible (but not shown in the example). First, a value of fallback instructs the browser to briefly render the text with a fallback font, waiting just a short time to obtain the actual font. If it can be obtained quickly enough (within 3 seconds), the text is rerendered with the actual font. But if it can not be obtained within that time-frame, it must simply give up trying and stick with the fallback.

    其他两个font-display值也是可能的(但示例中未显示)。 首先, fallback值指示浏览器使用后备字体简短地呈现文本,仅等待一小段时间即可获取实际字体。 如果可以足够快地(在3秒钟之内)获得它,则将使用实际字体重新渲染文本。 但是,如果无法在该时间范围内获得,则必须放弃尝试并坚持使用后备。

    Finally, a value of optional instructs the browser to give up immediately if the font isn't available when first needed, and permanently render the text with a fallback of its choice.

    最后, optional的值指示浏览器在首次需要该字体时如果不可用,则立即放弃,并使用其后备选项永久呈现该文本。

    The next part of each @font-face rule — the src property — specifies where to look for the font file. One or more locations may be provided. If there is any chance that it might be preinstalled on the user's device, use the local() keyword to tell the browser to look for it by name.

    每个@ font-face规则的下一部分src属性-指定在哪里寻找字体文件。 可以提供一个或多个位置。 如果有可能将其预安装在用户的设备上,请使用local()关键字告诉浏览器按名称查找。

    The more typical scenario though, is to use the url() keyword. This syntax will trigger a network request to fetch the specified file (but only if and when it's needed).

    但是,更典型的情况是使用url()关键字。 该语法将触发网络请求以获取指定的文件(但仅在需要和何时需要时)。

    It is perfectly acceptable to specify a URL that points to a third party provider like https://fonts.gstatic.com (Google Fonts). But this approach can sometimes lead to unexpected delays, causing your website to compete with every other website using that service. For more predictable behavior, that is under your control, consider hosting these files on your own servers.

    完全可以指定一个指向第三方提供程序的URL,例如https://fonts.gstatic.com (Google字体)。 但是这种方法有时会导致意外的延迟,从而导致您的网站与使用该服务的所有其他网站竞争。 对于更可预测的行为,这在您的控制之下,请考虑将这些文件托管在您自己的服务器上。

    The format() keyword specifies the encoding and compression of the font file. All modern browsers support the new Web Open Font Format, so there's very little reason to use older TTF or EOT formats anymore. And be sure to specify WOFF2 which optimizes glyph compression using the new brotli compression scheme.

    format()关键字指定字体文件的编码和压缩。 所有现代浏览器都支持新的Web开放字体格式,因此,几乎没有理由再使用旧的TTF或EOT格式。 并确保指定WOFF2,它可以使用新的brotli压缩方案优化字形压缩。

    The last part of each @font-face rule — the unicode-range property — specifies which Unicode code points have actual glyph definitions within the font file. This is a natural language optimization that some font foundries provide for typefaces that cover more than just the ASCII character set.

    每个@ font-face规则的最后一部分( unicode-range属性)指定字体文件中哪些Unicode代码点具有实际的字形定义。 这是一种自然语言优化,某些字体代工厂提供的字体不仅仅包含ASCII字符集。

    For example, if your font file has Greek characters it might only have glyphs defined for code points U+0370-03FF. Or for example, Cyrillic might only have glyphs defined for code points U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116.

    例如,如果您的字体文件包含希腊字符,则它可能仅具有为代码点U+0370-03FF定义的字形。 例如,西里尔字母可能只为代码点U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116定义了字形。

    By providing separate font-face rules with unicode-range this way, you can leave it up to the browser to decide which font files to fetch based on the actual text on each web page.

    通过以这种方式为unicode-range提供单独的字体规则,您可以将其留给浏览器,以根据每个网页上的实际文本来决定要提取的字体文件。

    One final note about @font-face rules. Because font files are only fetched by the browser when needed, it is quite common to have one set of @font-face rules that cover every possible need for an entire website. There is no need to hand-craft different rules for each page.

    关于@ font-face规则的最后一点说明。 因为仅在需要时才由浏览器获取字体文件,所以使用一组@ font-face规则来覆盖整个网站的所有可能需求是很常见的。 无需为每个页面手工制定不同的规则。

    预加载字体 (Preloading fonts)

    Web font files need to be fetched before being used. The browser does this automatically, as needed, using its internal algorithm for matching the glyphs on a page and the CSS rules for those glyphs. This algorithm is not exposed to the developer, so there is no direct way of tweaking it.

    使用Web字体文件之前,需要先将其提取。 浏览器会根据需要使用其内部算法来自动执行此操作,以将页面上的字形与这些字形CSS规则进行匹配。 该算法未向开发人员公开,因此没有直接的方法来进行调整。

    But oftentimes this on-demand fetching mechanism isn’t quick enough to prevent the annoying flash of unstyled text. One strategy to deal with this is HTML’s preload protocol. Here's how the frontend developer can instruct the browser to preload the three fonts of the previous example:

    但是通常,这种按需获取机制不够快,无法阻止烦人的未样式化文本闪烁。 解决此问题的一种策略是HTML的preload协议。 这是前端开发人员如何指示浏览器预加载上一个示例的三种字体的方法:

    <head>    
    <link href='/fonts/source-serif-pro-400-latin.woff2'
    rel=preload as=font type=font/woff2 crossorigin />
    <link href='/fonts/source-serif-pro-400-italic-latin.woff2'
    rel=preload as=font type=font/woff2 crossorigin />
    <link href='/fonts/source-serif-pro-600-latin.woff2'
    rel=preload as=font type=font/woff2 crossorigin />
    </head>

    In this code snippet, the rel=preload attribute instructs the browser to prioritize the download of these files over all others. So these three will be requested before any scripts, stylesheets or images. This is the most important secret for preventing the flash of unstyled text.

    在此代码段中, rel=preload属性指示浏览器优先于所有其他文件下载这些文件。 因此,将在任何脚本,样式表或图像之前请求这三个文件。 这是防止闪烁未样式的文本的最重要的秘密。

    HTML’s link tag can be used for many other things, but the as=font attribute is to be used only for @font-face rules. It instructs the browser to follow the content security policy for fonts and to send an accept request header that servers will correctly interpret.

    HTML的link标记可以用于许多其他用途,但是as=font属性仅用于@ font-face规则。 它指示浏览器遵循字体的内容安全策略,并发送服务器将正确解释的accept请求标头。

    The type=font/woff2 attribute is the corresponding content-type response header that the browser expects to see on the file it obtains. Together with as=font these two prevent accidental and malicious misuse of the preload instruction.

    type=font/woff2属性是浏览器希望在获取的文件上看到的相应的content-type响应标头。 这两个与as=font一起可以防止意外和恶意滥用预加载指令。

    Finally, the crossorigin attribute is required when preloading fonts, regardless of whether it comes from the website's host itself or a third-party host.

    最后,在预加载字体时,必须使用crossorigin属性,而不管它是来自网站的宿主本身还是第三方宿主。

    Two important points about this strategy. First, don’t overdo it — not every @font-face rule needs this priority treatment. Consider using it only for titling and places where large blocks of text are a significant part of the web page experience. And remember that the browser will still load all others in due course. When italicized and heavyweight font variants only serve to emphasize words and short phrases, a short delay in their final rendering will often be unnoticeable.

    关于此策略的两个要点。 首先,不要过度使用它-不是每个@ font-face规则都需要这种优先处理。 考虑仅将其用于标题和大块文本是网页体验重要组成部分的地方。 请记住,浏览器仍会在适当时候加载所有其他浏览器。 当斜体和重量级字体变体仅用于强调单词和短短语时,其最终渲染中的短暂延迟通常不会引起注意。

    Second, double-check to make sure that any preloaded font files are actually used. It’s counterproductive to have users wait for a font file that is not going to be used. When putting this strategy in place be sure to examine the Chrome DevTools Console for warnings similar to this:

    其次,仔细检查以确保实际使用了任何预加载的字体文件。 让用户等待将不使用的字体文件会适得其反。 采取这种策略时,请务必检查Chrome DevTools控制台是否存在类似以下的警告:

    The resource /fonts/source-serif-pro-400-latin.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

    字形子集 (Glyph subsets)

    Web fonts can be used for special purposes other than general text content and titling. For example, the well-known Font Awesome project contains a collection of popular icons that are packaged as a font file. Typically, most web pages that use Font Awesome only need a small subset of the approximately 1600 icons that each font file contains, so downloading a large file just to get a couple of icons is inefficient.

    Web字体可用于特殊目的,而不是常规文本内容和标题。 例如,著名的Font Awesome项目包含打包为字体文件的流行图标的集合。 通常,大多数使用Font Awesome的网页只需要每个字体文件包含的大约1600个图标中的一小部分,因此仅下载大文件以获取几个图标效率低下。

    This is where font subsetting is useful. The idea is to create a font file that only contains the glyphs that are needed. To accomplish this, a tool like pyftsubset is used. It opens an existing font file, copies the SVG outlines of the chosen glyphs, and repackages the result in a brand new font file.

    这是字体子设置有用的地方。 这个想法是创建一个仅包含所需字形的字体文件。 为此,使用了pyftsubset之类的工具。 它会打开一个现有的字体文件,复制所选字形的SVG轮廓,然后将结果重新打包为一个全新的字体文件。

    This same technique can be used with any appropriately licensed font file. For example, the splash page for ЯΈAĐ WЯΊTΈ TΘΘLŠ chose to render its title font in graffiti-style lettering to match its crazy/cool skateboarder theme. But instead of using an alternate typographic face, the website stuck with the designer’s choice (Source Sans Pro) and simply swapped in non-latin glyphs for R, E, D, I, O and S. The final font subset contains just 20 glyphs packed into a 5Kb file.

    相同的技术可以与任何适当许可的字体文件一起使用。 例如, ЯΈAĐWЯΊTΈTΘΘLŠ的初始页面选择以涂鸦样式的字体呈现其标题字体,以使其疯狂/酷酷的滑板手主题与其匹配。 但是,该网站没有使用替代的印刷字体,而是停留在设计师的选择之下(Source Sans Pro),只是将非拉丁字形替换为R,E,D,I,O和S。最终的字体子集仅包含20个字形。打包成5Kb文件。

    Yes, this type of optimization is a lot of extra work. Still, it can be worth it when trying to deliver a resource-heavy website over constrained networks such as mobile cell-towers.

    是的,这种优化是很多额外的工作。 尽管如此,试图过约束网络,如移动蜂窝塔提供一个资源型重网站时,它可以是值得的。

    快取 (Caching)

    Once a font file has been obtained, it should be cached on the client’s device. Since font files change rarely, if ever, they should be treated as a static resource. DevOps should configure the server to cache these files for a maximum amount of time. One year is a good rule to follow. Configure the server to set the response header like this:

    获取字体文件后,应将其缓存在客户端设备上。 由于字体文件很少更改(如果有的话),因此应将它们视为静态资源。 DevOps应将服务器配置为在最大时间内缓存这些文件。 遵循一年是一个好规则。 配置服务器以设置响应标头,如下所示:

    cache-control: max-age=31536000

    If the font foundry issues an updated version within that period, use any of the traditional cache-busting techniques that are available. But of course, only if the new file contains new glyphs that your content authors need.

    如果字体代工厂在此期间发布更新版本,请使用任何可用的传统缓存清除技术。 但是,当然,只有当新文件包含内容作者需要的新字形时,才可以。

    服务器推送 (Server push)

    DevOps may be tempted to help things along by using speculative push. This new protocol is available with HTTP/2. It works by sending targeted resources to the browser before the browser requests them.

    DevOps可能会尝试使用推测性推送来帮助解决问题。 此新协议可用于HTTP / 2。 它通过在浏览器请求目标资源之前向其发送目标资源来工作

    Speculative push was a much hyped solution to the problem of resource optimization. The reality is that it fares no better than the link rel=preload solution outlined above. Benchmark tests prove the point. Read all about it here.

    投机推送是对资源优化问题的大肆宣传解决方案。 现实情况是,它的性能并不比上面概述的link rel=preload解决方案好。 基准测试证明了这一点。 在这里阅读所有内容。

    替换字形 (Replacement glyphs)

    Content authors may be blissfully unaware of all the details just covered, and may inadvertently run into trouble. Remember, every font file contains a limited set of glyphs. So when the author uses a glyph that is not in the chosen font family the browser tries its best to find an alternative. This often leads to unsightly replacements.

    内容作者可能非常高兴地没有意识到刚刚涵盖的所有细节,并且可能会无意中遇到麻烦。 请记住,每个字体文件都包含一组有限的字形。 因此,当作者使用不在所选字体系列中的字形时,浏览器将尽最大努力寻找替代字形。 这通常导致难看的替换。

    For example, if the author is writing about Bosnian politician Šefik Džaferović, then the rules we’ve defined above won’t work. Instead, the browser will obligingly use Š, ž, and ć from some other serif font that it has access to. That replacement might be good enough on the author’s computer, but may be completely different on a random reader’s computer.

    例如,如果作者正在撰写有关波斯尼亚政治人物ŠefikDžaferović的文章,那么我们上面定义的规则将行不通。 取而代之的是,浏览器将强制使用它可以访问的其他衬线字体中的Š,ž和ć。 这种替换在作者的计算机上可能足够好,但在随机读者的计算机上可能完全不同。

    If the designer has chosen a “pro” font family that has an extended set of glyphs, the solution is simple: specify an additional @font-face rule with a unicode-range that covers U+0160, U+017E and U+0107. Thus, extending the original example we might add the "latin-ext" font file to our ruleset like this:

    如果设计人员选择了具有扩展字形集的“ pro”字体家族,则解决方案很简单:指定一个附加的@ font-face规则,其unicode-range覆盖U + 0160,U + 017E和U + 0107 。 因此,扩展原始示例,我们可以将“ latin-ext”字体文件添加到规则集中,如下所示:

    @font-face {
    font-family: 'Source Serif Pro';
    font-weight: 400;
    font-style: normal;
    font-display: block;
    src: local('SourceSerifPro-Regular'),
    url('/fonts/source-serif-pro-400-latin-ext.woff2')
    format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
    }

    豆腐和后备字体 (Tofu and fallback fonts)

    Sometimes an author may use esoteric glyphs that render reasonably well on their own computer, but that completely fail on the reader’s computer. This may happen for example when the author is writing on a computer with the newest hardware and operating system, but the reader is on a different hardware or older software that knows nothing about those glyphs.

    有时,作者可能会使用深奥的字形,这些字形在他们自己的计算机上可以很好地呈现,但是在读者的计算机上完全无法使用。 例如,当作者在具有最新硬件和操作系统的计算机上进行书写,而阅读器在对这些字形一无所知的其他硬件或较旧的软件上书写时,可能会发生这种情况。

    We sometimes mistakenly think of Unicode as being the miraculous solution to these types of problems, but remember that Unicode is a living standard. New versions with additional code points are added on a regular basis.

    有时我们会错误地认为Unicode是解决这些类型问题的奇迹,但请记住Unicode是生活标准。 带有附加代码点的新版本会定期添加。

    When this unfortunate circumstance occurs, the reader may discover “tofu” characters sprinkled into the text. The solution to this is to refine the CSS font stack, adding a fallback font that is guaranteed to have the widest possible set of glyphs.

    当发生这种不幸的情况时,读者可能会发现“豆腐”字符散落在文本中。 解决方案是优化CSS字体堆栈,添加一个后备字体,以确保它具有尽可能广泛的字形集。

    Google developed the Noto font just for this purpose. As of this writing, it spans 30 distinct writing scripts. It has glyphs in serif, sans-serif and monospaced styles.

    Google为此开发了Noto字体。 在撰写本文时,它涵盖了30种不同的编写脚本。 它具有衬线,无衬线和等距样式的字形。

    Because it is so comprehensive, it’s too big to use as a web font without splitting it up. Use of the unicode-range rule should be considered mandatory when using Google Noto as a web font.

    由于它非常全面,因此太大了,无法拆分成网络字体。 将Google Noto用作网络字体时,应认为必须使用unicode-range规则。

    特定语言的字体 (Language-specific fonts)

    Unicode has steadily increased support for more of the world’s ancient and modern languages. Each year new code points are added to the spec. But because of the time and expense involved, only a few font foundries have created glyph sets for these new code points.

    Unicode稳定地增加了对世界上更多的古代和现代语言的支持。 每年,新的代码点都会添加到规范中。 但是由于所涉及的时间和费用,只有很少的字体铸造厂为这些新代码点创建了字形集。

    When attempting to use any of these newer code points for authoring web pages, it is imperative that the author and frontend developer work closely to make sure that the reader can see what the author has written.

    尝试使用这些更新的代码点中的任何一个来创作Web页面时,必须与作者和前端开发人员密切合作以确保读者可以看到作者所写的内容。

    For example, if the author is writing about Egyptian archeology and wants to use hieroglyphs within the body of the text, the CSS from our original working example might be adjusted to look like this:

    例如,如果作者正在撰写有关埃及考古学的文章,并希望在文本正文中使用象形文字,则可以将原始工作示例中CSS调整为如下所示:

    article {
    font-family: 'Source Sans Pro',
    'Noto Sans Egyptian Hieroglyphs',
    sans-serif;
    font-size: 12pt;
    line-height: 1.4;
    margin: 1rem;
    }

    And an extra @font-face rule would be added like this:

    并且将添加一个额外的@ font-face规则,如下所示:

    @font-face {
    font-family: 'Noto Sans Egyptian Hieroglyphs';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/ea/notosansegyptianhieroglyphs
    /v1/NotoSansEgyptianHieroglyphs-Regular.woff2)
    format('woff2');
    unicode-range: U+13000-1342E;
    }

    With this in place, the article’s principal text will be rendered in Source Sans Pro, and the hieroglyphs will appear correctly, without tofu, using Noto Sans.

    完成此操作后,文章的主要文本将在Source Sans Pro中呈现,并且使用Noto Sans将在没有豆腐的情况下正确显示象形文字。

    表情符号 (Emojis)

    There is no font file, with cross platform support, that contains all of the Unicode-defined emojis. This limitation is largely because fonts have been a black-and-white affair up until now. Four different competing schemes have been developed to make use of color in fonts (SBIX, COLR, SVG-in-OpenType, and CBDT/CBLC). None of these enjoys universal support across all operating systems.

    没有带有跨平台支持的字体文件,该文件包含所有Unicode定义的表情符号。 该限制主要是因为到目前为止,字体一直是黑白事务。 已经开发出四种不同的竞争方案来利用字体中的颜色(SBIX,COLR,SVG-in-OpenType和CBDT / CBLC)。 这些都无法在所有操作系统上获得通用支持。

    In the mean time, we are left with:

    同时,我们还有:

    • Google Noto Color Emoji for Android and Linux

      适用于Android和Linux的Google Noto Color Emoji

    • Apple Color Emoji for iOS, macOS, watchOS and tvOs

      适用于iOS,macOS,watchOS和tvO的Apple Color Emoji

    • Microsoft Segoe Color Emoji for Windows 10

      适用于Windows 10的Microsoft Segoe Color Emoji

    • Twitter Emoji for Everyone for SVGinOT

      适用于SVGinOT的所有人的 Twitter 表情符号

    Unfortunately the rendering of each emoji is open to artistic interpretation. As a result, the author and reader will often see something slightly different. Sometimes the difference is so great that it is open to misinterpretation. For example ‘FACE WITH ROLLING EYES’ (U+1F644) looks exasperated with Google, confused with Apple, and amused with Samsung.

    不幸的是,每个表情符号的渲染都可以进行艺术性的解释。 结果,作者和读者经常会看到稍微不同的东西。 有时差异如此之大,以至于容易引起误解。 例如,“脸蛋滚动的脸”(U + 1F644)看起来对Google感到愤怒,对Apple感到困惑,而对Samsung感到很有趣。

    As of this writing, a cross-platform web font solution to this problem remains elusive. Of course this doesn’t mean we can’t use emojis. But it does mean that designers can’t expect to have their designs faithfully rendered on every platform readers use. Because of this, a web font solution to the problem is simply not worth pursuing at this time.

    在撰写本文时,针对此问题的跨平台Web字体解决方案仍然难以捉摸。 当然,这并不意味着我们不能使用表情符号。 但这确实意味着设计师不能期望将设计真实地呈现在读者使用的每个平台上。 因此,目前根本不值得解决该问题的Web字体解决方案

    Follow these six golden rules to ensure a great end-user experience with web fonts:

    请遵循以下六个黄金法则,以确保最终的用户体验Web字体:

    1. Define @font-face rules for normal, italic and bold variants for each font family used.

      为使用的每个字体系列的正常,斜体和粗体定义@ font-face规则。
    2. Use the font-display property to specify an appropriate FOUT strategy.

      使用font-display属性可以指定适当的FOUT策略。

    3. Add HTML <link rel=preload> statements to prioritize the delivery of critical fonts.

      添加HTML <link rel=preload>语句以优先分配关键字体。

    4. Create font subsets for company-specific lettering needs.

      创建字体子集以满足公司特定的刻字需求。
    5. Cache aggressively.

      主动缓存。
    6. Watch for tofu and respond by specifying fallback fonts when necessary.

      注意豆腐,并在必要时通过指定后备字体进行响应。

    Web fonts can be a part of every website’s design. Avoiding the hidden gotchas requires diligence, but getting it right is worth the trouble.

    Web字体可以成为每个网站设计的一部分。 避免隐藏的陷阱需要勤奋工作,但正确解决问题却值得。

    翻译自: https://uxdesign.cc/2020-019-web-fonts-done-right-e21df103205

    web字体设置成平方字体

    展开全文
  • web字体设置成平方字体 毫无疑问,近年来,开源字体已经改变了网络的面貌。 在2010年之前,您可能会在网络浏览器中看到的唯一字体是Microsoft的通用“网络安全” 核心字体 。 但是那一年是几场革命的开始:Web Open ...

    web字体设置成平方字体

    毫无疑问,近年来,开源字体已经改变了网络的面貌。 在2010年之前,您可能会在网络浏览器中看到的唯一字体是Microsoft的通用“网络安全” 核心字体 但是那一年是几场革命的开始:Web Open Font Format( WOFF )的引入,它提供了通过HTTP有效传送字体文件的开放标准,并推出了Google FontsOpen Font等Web字体服务。 -两者都为网络发布者提供了免费访问大量字体的方法,这些字体可以通过开放许可获得。

    很难夸大这些事件对Web版式的积极影响。 但是,将开放式Web字体的成功与整体上的开放源代码排版等同起来并得出结论,挑战已经过去,难题解决了,这太容易了。 事实并非如此,因此,如果您关心类型,那么好消息是,有很多机会参与改进。

    对于初学者来说,至关重要的是要了解Google字体和开放字体库提供了专门的服务-在网页中提供字体-并且它们没有为其他用例实现解决方案。 在服务方面这不是缺点。 这仅意味着我们必须开发其他解决方案。

    有许多问题需要解决。 可能最明显的例子是在台式Linux机器上安装字体以用于其他应用程序的尴尬。 您可以下载任何一种服务提供的任何Web字体,但是您将获得的是一个通用的ZIP文件,其中包含一些TTF或OTF二进制文件以及一个纯文本许可证文件。 接下来会发生什么由您自己猜测。

    大多数用户很快了解到,“正确”的步骤是将这些字体二进制文件手动复制到其硬盘驱动器上的几个特殊目录中的任何一个中。 但这只是使文件对操作系统可见。 它并没有提供太多的用户体验。 同样,这不是网络字体服务的缺陷。 相反,这证明了该服务停止的点,并且另一端需要完成更多工作。

    从用户的角度来看,一个很大的改进是在此“仅下载”阶段,操作系统或桌面环境将变得更加智能。 它不仅可以将字体文件安装到正确的位置,而且更重要的是,它可以添加重要的元数据,用户在选择要在项目中使用的字体时希望访问。

    这些附加信息的组成以及如何将其呈现给用户,这与另一个挑战有关:与其他操作系统相比,在Linux上管理字体集合显然不那么令人满意。 字体管理器应用程序会定期出现(有关最新示例,请参见GTK +字体管理器 ),但是它们很少流行。 我一直在思考我认为它们不足之处。 一个核心因素是它们仅限于显示嵌入在字体二进制文件中的信息:基本字符集覆盖率,重量/宽度/斜率设置,嵌入的许可证和版权声明等。

    但是,除了嵌入数据中的内容之外,还有很多决定会涉及为工作选择字体的过程。 认真的字体用户(例如信息设计师,期刊文章作者或书籍设计师)会根据每个文档的要求和需求来做出字体选择决定。 这自然包括许可证信息,但包括更多信息,例如有关设计师和铸造厂的信息,风格趋势或有关字体使用方式的详细信息。

    例如,如果您的文档同时包含英语和阿拉伯语文本,则您可能希望使用一种字体,其中拉丁语和阿拉伯字形由经验丰富的两个人共同设计。 否则,您将浪费大量时间对字体大小和行距进行微小的调整,以使两种语言很好地融合在一起。 您可能从经验中学到,某些设计师或供应商在多脚本设计方面比其他设计师或供应商更好。 也许与您的项目相关的是,当今的时尚杂志几乎只使用“ Didone ”风格的字体,该名称指的是200年前由Firmin DidotGiambattista Bodoni率先提出的超高对比度风格。 恰好是趋势。

    但是这些术语(Didone,Didot或Bodoni)都不会出现在二进制文件的嵌入数据中,也很难分辨拉丁语和阿拉伯语是否融合在一起或有关字体的历史。 该信息可能会出现在补充材料中,例如类型标本或字体文档(如果有)。

    标本是设计好的文档(通常为PDF),其中显示了使用的字体并包括背景信息。 在选择字体时,它经常起着双重作用,既是营销活动,又是示例。 经过深思熟虑的标本设计展示了字体在实际中的功能以及自动生成的字符表根本无法实现的方式。 文档可能还包括其他一些重要信息,例如如何激活字体的OpenType功能,提供的数学或过时形式,或者在支持的语言中其样式上的变化。 在字体管理应用程序中向用户提供这种材料对于帮助用户找到适合其项目需求的字体将有很大的帮助。

    当然,如果我们要考虑可以处理文档和样本的字体管理器,则还必须仔细查看发行版提供的字体包附带的内容。 Linux用户以自动安装的几种字体开始,并且除了下载通用的ZIP归档文件之外,存储库提供的软件包是大多数用户唯一的字体来源。 这些程序包往往是简陋的。 商业字体通常包括标本,文档和其他支持项目,而开源字体通常不包括。

    有一些出色的开放字体示例可以提供高质量的样本和文档(有关两种截然不同但有效的方法,请参见SIL GentiumBungee ),但它们很少(如果有的话)进入下游包装链。 我们显然可以做得更好。

    为与系统上的字体进行交互提供更丰富的用户体验存在一些技术障碍。 一方面, AppStream元数据标准定义了一些字体文件特有的参数 ,但到目前为止,其中没有任何内容涵盖标本,设计师和铸造厂的信息以及其他相关细节。 另外, SPDX (软件包数据交换)格式不包括许多用于分发字体的软件许可证(和许可证变体)。

    最终,正如任何发烧友所说的那样,不允许您编辑和扩充MP3集中的ID3标签的音乐播放器将很快使您感到沮丧。 您想修复标签中的错误,想要添加注释和专辑封面之类的内容—本质上,您想抛光库。 您可能希望这样做,以使本地字体库保持使用愉快的状态。

    但是编辑字体文件中的嵌入数据已成为禁忌,因为字体倾向于嵌入并附加到其他文档中。 如果您用字体二进制文件填充字段,然后将其与演示文稿幻灯片一起重新分发,那么下载这些幻灯片的任何人最终都会得到错误的元数据,而这不会造成任何错误。 因此,任何改善字体管理体验的人都必须弄清楚如何从策略上解决对嵌入式和外部字体元数据的重复更改。

    除了技术角度之外,丰富的字体管理经验也是一项设计挑战。 就像我在上面说的那样,存在一些开放字体的好的标本和精心编写的文档。 但是还有很多软件包都缺少,并且有很多较旧的字体软件包不再维护。 这可能意味着大多数开放字体包都将获取标本或文档的唯一方法是由社区创建它们。

    也许这是一个艰巨的任务。 但是开源设计社区比以往任何时候都更大,并且是整个自由和开源软件运动中一个高度积极的部分。 谁知道呢? 也许明年明年这个时候,在台式机Linux系统上查找,下载和使用字体将是完全不同的体验。

    有关现代Linux用户的排版挑战的一个思路包括包装,文档设计,甚至可能还有一些用于桌面环境的新软件组件。 也有其他火车要考虑。 共同点是,Web字体服务在哪里结束,事情就变得更加困难。

    从我的角度来看,最好的消息是,对该主题感兴趣的人比以往任何时候都多。 为此,我认为我们具有较高的知名度,因为感谢大型字体网站服务(例如Google字体和开放字体库)收到的开放字体。


    内森·威利斯(Nathan Willis) 将发表演讲 怎么办? 今年3月8日至11日在加利福尼亚州帕萨迪纳举行的SCaLE16x上。 要参加并获得50%的门票,请使用促销代码OSDC进行 注册

    翻译自: https://opensource.com/article/18/3/webfonts

    web字体设置成平方字体

    展开全文
  • web字体设置成平方字体 字体通常是许多计算机用户的谜。 例如,您是否设计了一个精美的传单,并且将文件放在某个地方进行打印时,发现Arial中呈现的所有标题是因为打印机没有您在设计中使用的精美字体? 当然,有...
  • web开发字体设置

    2017-04-01 19:23:00
    为了解决rem在进行单位换算上的麻烦问题,给大家介绍个使用rem的小方法,设置html字体大小为font-size:62.5%;然后使用rem的时候就更好用了,比如1.2rem=12px,1.4rem=14px,1.6rem=16px. 单行文本溢出隐藏: 1、定义...
  • 当原型使用一些特殊字体时,在没有安装该字体的设备上将无法正常显示。Web字体可以比较好的解决这个问题。...步骤图例步骤图例(二)在【Web字体设置中,勾选【包含Web字体】。选择【+】号添加字体,...
  • css怎么设置字体单行居中?1、首先为了便于观察,先创建一个div.app{width: 200px;height: 100px;border: 1px solid skyblue;}2、然后在div里写上一个p标签,并设置它text-align: center;属性实现单行居中。(相关...
  • 安卓手机系统设置字体大小后与APP以及web端字体大小问题最近在做一些有关html和App的一些混合式开发,在测试过程中发现,android手机系统设置了字体大小,app应用中和web服务端的页面(也就是html界面)字体都会有...
  • web字体设置

    2018-11-13 21:44:00
    @font-face { font-family: 'OpenSans'; src: url("../fonts/open-sans-v15-latin-regular.woff2") format('woff2'), url("../fonts/open-sans-v15-latin-regular.woff") format('woff'), url("../fon...
  • web打印字体css设置

    万次阅读 2007-03-05 21:39:00
    我们有些时候可能会碰到从web页面直接打印的情况:为了节省纸张:一般打印的正文字体都是小五号字体下面是有关字体的大小的单位和转换小五号 = 9pt = 12px这是我们从办公软件习惯转到htm页面的换算有关打印的纸张,...
  • body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; } ...中文字体设置为华文黑体STHeiTi。需补充说明,华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5...
  • Axure RP9 Web字体设置

    千次阅读 2020-06-12 15:22:22
    1.下载Font Awesome字体 下载链接(http://www.fontawesome.com.cn/) 2.解压并打开文件 3.双击(fontawesome-webfont.otf定是fontawesome-webfont.ttf)文件安装? 4.
  • 在网页设计中字体设置不可小觑,好的字体让人赏心悦目,凌乱的字体让人抓狂,如何正确的设置网页中的字体便是今天讨论的话题。在网页设计中字体设置时要考虑到不同系统、不同浏览器、不同渲染方式的字体表现,选择...
  • 一、字体样式1、字体:font-family(属性值为具体字体名,字体集):定义元素内文字以什么字体来显示font-family:[字体1][字体2][...] /*设置多个字体,浏览器依次查找,若都没有使用浏览器默认样式*/字体集:Serif...
  • web网页引入自定义字体设置

    万次阅读 2017-11-30 11:55:20
    1、首先需要下载你需要的字体,此项目中用到的字体是思源黑体(light),需要字体文件的格式是.ttf,思源的ttf版字体不好找,我是下载的otf版,又用fontCreate 软件转换了一下,算是得到了ttf字体(废了老大劲,才...
  • 包含excel的基本功能支持合并单元格,拆分单元格支持插入单元格,删除单元格支持整行整列选择单元格自定义右键菜单,可以设置单元格数量支持鼠标左键拖动调整单元格宽高支持选中单元格输入文字,多个单元格设置字体,...
  • 使用web view 加载一个html页面, html页面的源码片段: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html> <...
  • web前端——合理的设置字体大小

    千次阅读 2011-06-04 21:23:00
    我想大家在做html页面的时候都会遇到过面对字体大小无从下手的尴尬吧,似乎如何使用字体大小这么个细节也许就成了我们设计上的一些瑕疵,失误。或许我们也似乎从未往这... 在我的一些网页设计中对字体设置很少有看...
  • web css 苹方字体设置

    千次阅读 2019-07-15 13:34:25
    // 苹方-简 常规体 font-family: PingFangSC-Regular, sans-serif; // 苹方-简 极细体 font-family: PingFangSC-Ultralight, sans-serif; // 苹方-简 细体 font-family: PingFangSC-Light, sans-serif;...
  • web字体选择

    千次阅读 2017-11-07 10:49:07
    大家都知道,在不同操作系统、不同游览器里面默认显示的字体是不一样的,并且相同字体在不同操作系统里面渲染的效果也不尽相同,那么如何设置字体显示效果会比较好呢?下面我们逐步的分析一下: 一、首先我们看看各...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,688
精华内容 675
关键字:

web设置字体