精华内容
下载资源
问答
  • 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设置字体粗细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页面字体设置

    2013-12-02 12:54:18
    web页面字体设置
  • } style> head> <body> 设置字体大小、样式及字体名称h3> <hr> 字号大小20px、字体正常、宋体p> 字号大小200%、字体斜体、隶书p> 字号大小x-small、字体歪斜体、宋体p> 字号大小xx-large\字体歪斜体、黑体p> body> ...
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS列表属性综合应用</title>
     <style type="text/css">
         h3{text-align: center;color: #3300ff;}
         hr{color: #660066;}
         #p1{font-size: 20px;font-style: normal;font-family: 宋体;}
         #p2{font-size: 200%;font-style: italic;font-family: 楷书,隶书;}
         #p3{font-size:x-small;font-style: oblique;font-family: 楷书,宋体;}
         #p4{font-size:xx-large;font-style: oblique;font-family: 黑体,隶书,楷体_gb2312;}
     </style>
    </head>
    <body>
    <h3>设置字体大小、样式及字体名称</h3>
    <hr>
    <p id="p1">字号大小20px、字体正常、宋体</p>
    <p id="p2">字号大小200%、字体斜体、隶书</p>
    <p id="p3">字号大小x-small、字体歪斜体、宋体</p>
    <p id="p4">字号大小xx-large\字体歪斜体、黑体</p>
    </body>
    </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...
    @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("../fonts/open-sans-v15-latin-regular.eot") format('embedded-opentype'),
    url("../fonts/open-sans-v15-latin-regular.ttf") format('truetype'),
    url("../fonts/open-sans-v15-latin-regular.svg") format('svg');
    font-weight: normal;
    font-style: normal;
    }

    转载于:https://www.cnblogs.com/chunshan-blog/p/9954985.html

    展开全文
  • web字体样式篇

    千次阅读 2019-09-26 15:14:44
    设置字体大小、样式、及字体名称 字号大小为20px、字体正常、宋体 字号大小为200%、字体为斜体、隶书 字号大小为x-small、字体为歪斜体、隶书 字号大小为xx-large、字体歪斜体、黑体</p>
  • HTML选取颜色,设置字体web设置样式不错的选择
  • web网页引入自定义字体设置

    万次阅读 2017-11-30 11:55:20
    1、首先需要下载你需要的字体,此项目中用到的字体是思源黑体(light),需要字体文件的格式是.ttf,思源的ttf版字体不好找,我是下载的otf版,又用fontCreate 软件转换了一下,算是得到了ttf字体(废了老大劲,才...
  • 在一个声明中设置所有的字体属性 font-family 指定文本的字体系列 font-size 指定文本的字体大小 font-style 指定文本的字体样式 font-variant 以小型大写字体或者正常字体显示文本。 font...
  • JAVA Web 字体样式

    千次阅读 2019-03-16 21:41:20
    正体:normal 斜体:italic 字体加粗:bold
  • 下面小编就为大家带来一篇CSS Web安全字体组合详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • WebStorm如何设置字体大小

    万次阅读 多人点赞 2018-06-21 10:37:32
    由于最近要练习一些js代码,特地装了WebStorm,但是发现字体太小,因此将已知的两种方法整理出来。 一、Ctrl+滚动滑轮调整字体大小 File--->Settings(Ctrl+Alt+s)--->Editor--->General--->Change ...
  • 调研一下ios和android设备所支持各种浏览器支持的字体。一听“调研”俩字,我就头大了,我一个小程序员,又不是搞产品的哪干过这样的活。研究了一天就发现自己知识开阔了不少,感兴趣的朋友可以了解下啊
  • 一、什么是字体图标 字体图标:简单的说,就是一种特殊的字体,通过这种字体,显示给用户的就像一个个图片一样,但它的本质是文字。目前在移动端应用比较广泛! 二、字体图标的使用步骤 这里以阿里巴巴矢量图标库为...
  • web字体特效

    2019-09-06 10:24:54
    个人收集的精致的文字字体特效,包含10中华丽特效字体效果
  • /* eslint-disable */ /** 限制用户修改字体大小 */ setting () { if(typeof WeixinJSBridge == 'object' && typeof WeixinJSBridge.invoke == 'function') { handleFontSize(); } ...
  • 自定义web字体,通过@font-face在网页中嵌入自定义字体
  • web前端——合理的设置字体大小

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

    万次阅读 2018-06-11 12:01:05
    转自:https://blog.csdn.net/maomaoduoer/article/details/49273327WebStorm是一个捷克公司开发的,功能虽然很强大,但UI貌似一直不是东欧人的强项。... 新建Scheme + 修改字体ctrl+alt+s打开S...
  • html设置字体显示颜色以及大小

    千次阅读 2017-05-09 07:58:05
    4号隶书显示 5号宋体显示 3H号华文楷体显示   效果:
  • (1)点击window (2)点击preference (3)点击General->apperance->basic->text front
  • 1.HTML5中字体的相关标签设置 ① <em>...</em> 标签:将其中的内容转换为斜体。(类似于 <i>...</i>) ② <strong>...</strong> 标签:将其中的内容进行加粗。(类似于 <...
  • webview设置字体颜色、大小

    万次阅读 2014-01-11 17:23:03
    //字体颜色设为白色,“p”标签内的字体颜色 public final static String CSS_STYLE = "p {color:#FFFFFF;}";// webView.loadDataWithBaseURL(null, CSS_STYLE+data, "text/html", "utf-8", null); 借鉴自:...
  • 安卓手机系统设置字体大小后与APP以及web字体大小问题最近在做一些有关html和App的一些混合式开发,在测试过程中发现,android手机系统设置字体大小,app应用中和web服务端的页面(也就是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;...
  • 设置文本大小我们可以使用 font-size,设置颜色我们可以使用 color,字体我们可以使用 font-family 可以看到,两个文本内容虽然一样,但是,字体、大小、颜色都不相同 二、倾斜、加粗 倾斜我们是使用的font-...
  • 在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体。
  • 简单记录 -慕课网- 步骤一:抖音风格字体效果 案例:抖音风格的字体特效。 实现这个 需要设置 网页背景颜色 字体颜色 字体大小 文本阴影 重点介绍如何设置文本阴影 CSS的文本阴影text-shadow属性 无扩散的阴影...
  • Web前端 字体样式

    千次阅读 2020-07-01 23:23:52
    <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>文本属性</title> <style > .xiaofan { width: 200px; height: 200px; background-color: ... .

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 157,858
精华内容 63,143
关键字:

web设置字体