首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Google字体在本地具有不同的粗细,但名称相同

是因为Google字体库提供了多种字体变体,包括不同的粗细和风格。这些字体变体可以通过在CSS样式表中设置不同的字体权重(font-weight)来实现。

字体权重是指字体的粗细程度,通常用数字表示,如100表示超细细度,400表示正常(常规)粗细,700表示粗体,900表示黑体。Google字体库提供了多个权重的字体变体,例如100、200、300、400、500、600、700、800和900。

通过在CSS样式表中设置不同的字体权重,可以实现不同粗细的字体效果。例如,可以使用以下CSS代码将Google字体的不同粗细应用于网页中的文本:

代码语言:txt
复制
/* 正常粗细 */
font-family: 'Font Name', sans-serif;
font-weight: 400;

/* 粗体 */
font-family: 'Font Name', sans-serif;
font-weight: 700;

/* 超细细度 */
font-family: 'Font Name', sans-serif;
font-weight: 100;

这样,无论是在本地还是在云端,使用相同名称的Google字体,通过设置不同的字体权重,可以实现不同的粗细效果。

Google字体库是一个免费的开源字体库,提供了丰富的字体选择,适用于各种应用场景,包括网页设计、移动应用、印刷品等。使用Google字体库可以提升网页加载速度和用户体验,同时保持一致的字体显示效果。

腾讯云提供了丰富的云计算产品和服务,包括云服务器、云数据库、云存储、人工智能等。在使用Google字体时,可以考虑使用腾讯云的云服务器和云存储服务,以提供稳定的服务器环境和高效的字体文件存储。具体的产品介绍和链接地址如下:

  • 腾讯云云服务器(CVM):提供弹性计算能力,满足不同规模和需求的应用场景。了解更多:腾讯云云服务器
  • 腾讯云云存储(COS):提供安全可靠的对象存储服务,适用于存储和管理大量的字体文件。了解更多:腾讯云云存储

请注意,以上提到的腾讯云产品仅作为示例,其他云计算品牌商也提供类似的产品和服务,具体选择应根据实际需求和偏好进行。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

PPT制作套路指南

百度百科中对非衬线字体的解释,“与衬线字体相反,该类字体通常是机械的和统一线条的,它们往往拥有相同的曲率,笔直的线条,锐利的转角。”...显然,在PPT这样的载体上,单倍行距不适于阅读,1.5~2倍是最佳选择。 字重 字重,也就是字体的粗细程度。...但这并不是一个具有“设计感”的PPT,我们通过上述套路来对它进行改造。 改造一:去掉多余的符号 ? 建筑大师路德维希·密斯·凡德罗所说“less is more”,所以我们去掉多余的“·”符号。...要想有设计感,重要的套路就是要有对比——粗细对比 下面在列举一些通过对比来产生设计感的例子: ? ? ? ? ? ? 在最后一个例子中,字体并没有选取纯黑的字体,并且加入了更强烈的对比元素。...相同的形式,不同的内容 说了这么多,给大家总结一下本文对于PPT制作套路的关键字——对比,中英对比、粗细对比等。

1.1K20

第06步《前端篇》第2章打造游戏界面第1课

Pro”字体下载地址为:https://fonts.google.com/specimen/Source+Code+Pro。...HTML是富文本标记语言,这门语言的主要作用在于标签和构建页面结构。每个HTML标记都是成对出现的,它们都具有相同的格式:......字体名称在程序中一般既不能以中文出现,也不能以中文拼音出现,它们有特定的符号名称,例如字体是SimSun、黑体是STHeiti、楷体是KaiTi、微软雅黑是Microsoft Yahei等。...实践疑难点 font-weight一般建议直接使用绝对粗细的数字值,而不是相对粗细的名称值。在网页的根元素设置的font-weight不同的,所有子元素的相对值都会受到影响。...不只是font-weight这一个CSS样式如此,其它CSS样式也有相同的问题,都需要注意。 设置font-family样式时,要注意使用真正的英文符号名称,而不是常见的中文名称。

1.1K20
  • 面向程序员的 10 款开源字体,个个都是极品,你最喜欢哪一款?

    点击关注公众号,Java干货及时送达 出品 | OSC开源社区(ID:oschina2013) 在百花齐放的开源世界中,开源字体属于较为小众的一个分支。...作为一种编程字体,Fira Code 对 ASCII / 框绘图、电力线和其他形式的控制台 UI 具有出色的支持:Spring Boot 学习笔记这个分享给你。...最新面试题整理好了,大家可以在Java面试库小程序在线刷题。...思源黑体支持简体中文、繁体中文、日文、韩文以及英文;提供了 ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy 共 7 种字体粗细,可以满足不同场景下的文字显示需求...个字形,七种字重共收录高达 458745 个字形,可以满足不同的设计需求。

    29.6K36

    Web 字体 font-family 再探秘

    衬线字体 -- 关键字为 serif,意为有衬线的字体,衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰,而且笔画的粗细会有所不同,这些细节在大写字母中特别明显。 ?...与衬线字体相反,该类字体通常是机械的和统一线条的,它们往往拥有相同的曲率,笔直的线条,锐利的转角。...sans-serif 非衬线字体族 monospace 等宽字体,即字体中每个字宽度相同 cursive 草书字体 fantasy 主要是那些具有特殊艺术效果的字体 新增通用字体族关键字 而在 CSS...Roboto Roboto 是为 Android 操作系统设计的一个无衬线字体家族。Google 描述该字体为“现代的、但平易近人”和“有感情”的。...Roboto,面向 Android 和一些新版的的 Chrome OS Helvetica,Arial,在针对不同操作系统不同平台设定采用默认系统字体后,针对一些低版本浏览器的降级方案 sans-serif

    2.5K10

    网页|CSS字体介绍

    字体粗细 可以使用font-family属性定义文档采用的优先字体系列。...通用字体系列 CSS定义了5种通用字体系列: a) Serif字体系列的字体成比例,而且有上下短线。成比例是指字体中的所有字符根据其不同大小有不同的宽度。例如,小写i和小写m的宽度就不同。...c) Monospace字体系列的字体并不是成比例的,通常用于打印机输出。这些字体每个字符的宽度都必须完全相同,所以小写的i和小写的m有相同的宽度。...@font-face规则中定义的描述符。 描述符 值 描述 font-family name 必需。规定字体的名称 src URL 必需。...默认是 "U+0-10FFFF" 如果使用服务器端字体,必须首先在@font-face规则中定义字体的名称和位置,然后在HTML元素中通过font-family来引用服务器端字体。 END

    2.5K20

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

    看下面的这张图片: 里面的字,是相同大小的,同时排放在一条竖线上。为其应用了四种不同的字体后,体现出来了不同的形态和粗细大小。在中文字体中,不同的字体,在字间距中通常没有很大的变化。...而在英文字体中,不同的字体会改变字母的大小,导致整体的尺寸布局不同,进而导致整个排版混乱。 相同的字体大小,在不同的字体下面,显示的效果几乎完全不同。这是英文字体选择中,比较麻烦和头疼的问题。...当然,有问题就有解决方式: 使用经典通用字体 不同操作系统都有不同的字体系统,但既然是字体,总有一些比较经典老牌的字体共同存在于各个系统中。...所以当你看一些网页作品的时候,会发现它的 CSS 中的 font-family 属性,指定了一大堆的 字体 名称。但这个也不是可以随便指定的,也有一些注意事项。...但是缺点很明显,你无法直观的看到大小,而且对于不同的大小,你需要精确的计算。 字体实际表现出来的大小 上面只是说了两种形容字体大小的单位,但实际上表现出来的字体大小,并非简单的单位前面的数值。

    80810

    面向程序员的精品开源字体

    出品 | OSC开源社区(ID:oschina2013) 在百花齐放的开源世界中,开源字体属于较为小众的一个分支。不过往往越是小众的领域,反而会诞生出更多惊艳的作品。...Fira Code 是专为程序员打造的编程字体,除了具有等宽等基本属性外,还加入了编程连字特性 (ligatures)。 ...作为一种编程字体,Fira Code 对 ASCII / 框绘图、电力线和其他形式的控制台 UI 具有出色的支持: Fira Code 是第一个提供专用字形来渲染进度条的编程字体: Fira Code...思源黑体支持简体中文、繁体中文、日文、韩文以及英文;提供了 ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy 共 7 种字体粗细,可以满足不同场景下的文字显示需求...个字形,七种字重共收录高达 458745 个字形,可以满足不同的设计需求。

    1.1K10

    css基础第一弹

    内部样式与外部样式 优先级是相同的 谁在下面结果就是谁 css选择器 css选择器有什么作用?...根据元素id来选择元素,具有唯一性,这说明一个id在一个页面内只能出现一次,ID选择器以#来定义,在HTML中用id来引用。 注意事项:一个id属性只能在每个 HTML 文档中出现一次。...一般情况下,如果用空格隔开的多个单词组成的字体,加引号 字体大小 CSS 使用font-size属性定义字体大小 p { font-size: 20px; } px(像素)是网页中常用的单位 不同浏览器的默认字体大小是不一样的...(chrome浏览器默认文字大小为16px),我们尽量给一个明确大小 可以给body标签指定整个页面大小 字体粗细 CSS 使用font-weight属性设置文本字体的粗细。...p { font-style: normal; } 属性值 描述 normal 默认值,显示标准的字体样式 italic 浏览器会显示倾斜的字体样式 字体复合属性 字体系列、大小、粗细、和文字样式

    1.9K20

    【CSS3】css开篇基础(1)

    ​ id 选择器 CSS 中的 ID 选择器用于选取具有特定 id 属性的元素,ID 选择器在 CSS 中使用井号(#)后跟 ID 名称来定义。...每个 id 在页面中是唯一的,因此 ID 选择器通常只能应用于单个元素。 在 HTML 中,每个 id 属性值只能在页面中使用一次,但页面中可以有多个不同的 id 值。...换句话说,每个元素的 id 必须是独一无二的,但你可以为页面中的不同元素赋予各自不同的 id。 在页面中定义任意数量的不同 id,但每个 id 只能用于一个元素。 通配符选择器 通配符选择器(*)是 CSS 中的一种选择器,能够选取页面中的所有元素。...(同样这在文本字体的粗细中同样适用) font-weight CSS 使用 font-weight属性设置文本字体的粗细, 常用值: normal: 默认字体粗细 bold: 粗体 数值 (100 -

    10510

    css基础第一弹

    内部样式与外部样式 优先级是相同的 谁在下面结果就是谁 css选择器 css选择器有什么作用?...选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说,css选择器就是用于指向需要css作用的标签,让css样式知道自己需要到那个标签上去。...根据元素id来选择元素,具有唯一性,这说明一个id在一个页面内只能出现一次,ID选择器以#来定义,在HTML中用id来引用。 注意事项:一个id属性只能在每个 HTML 文档中出现一次。...--页面中的字体都会变成30px--> 基础选择器总结 基础选择器 作用 特点 使用情况 用法 标签选择器 可以所有相同的标签,比如p 不能差异化选择 较多 p {color:red;} 类选择器 可以选出一个或多个标签...不同浏览器的默认字体大小是不一样的(chrome浏览器默认文字大小为16px),我们尽量给一个明确大小 可以给body标签指定整个页面大小 字体粗细 CSS 使用font-weight属性设置文本字体的粗细

    10710

    字体的力量:将PPT设计做到极致

    考虑到排版的需要 在排版文字段落时,为了让标题更加醒目,与正文形成一定程度上的对比。我们可以为标题选用字形较粗的字体,正文使用较细的字体。另外,粗细字体搭配的排版也会更加美观。...另外,再提醒一个细微之处,那就是除了微软雅黑这款字体外,对于其他字体,不要人为地把字体加粗处理,因为每一款字体在设计之初,都有一定的美学理念,人为地改变笔画粗细可能会造成美观性丢失。...考虑到场景的需要 因为不同的字体有不同的应用场景,选用恰当的字体会让内容更具有表现力。但字体设计师并没有给每一款字体贴上相应的标签,那么,我们应该如何判断字体的具体应用场景呢首先,按照常识来判断。...找对合适字体 但有一个问题,有时看中了某款海报上的字体,但并不知道这个字体的名称,这时候该如何下载呢?...总的来说,在字体选用上,要考虑阅读成本、排版要求以及场景需要,当面对不知道名称的字体时,可以使用求字体网进行下载安装,但在使用过程中,一定要注意字体的版权问题。

    1.3K20

    突破限制,CSS font-variation 可变字体的魅力

    从而无需再将不同字宽、字重或不同样式的字体分割成不同的字体文件。我们只需通过CSS与一行 @font-face 引用,即可获取包含在这个单一文件中的各种字体变体。...这意味着我们可能需要 20 或 30 个不同的字体文件才能算是有了一整个字体家族(对于有着不同宽度的大型字体来说,这个数量还要翻上几倍)。...静态字体的局限性 举个例子,在 Google Font,我随便选取一个标准静态字体,实现一个字体 font-weight 的变化动画: CSS font-variation CSS...基本语法是相同的,但是字体技术是不一样的,并且可变字体可以提供像对 font-weight 和 font-stretch 等描述符的允许范围,而不是根据加载的字体文件来命名。...等级轴 'GRAD':“等级”一词指的是字体设计的相对重量或密度,但与传统的“重量”不同之处在于文本占据的物理空间不会改变,因此改变文本等级并不会改变文本或其周围元素的整体布局。

    1.2K10

    设计效能 | QQ动漫的设计系统之路

    问题之源—本地组件库 在项目初期,团队设计师的协作方式是通过一个本地的sketch规范文件,以复制粘贴的方式来复用一些元素和控件。...对于QQ动漫项目来说,常见的控件类别包括:颜色、字体、图标、按钮、导航、状态栏、弹窗、列表、标签等等。每个项目所需要整理的组件不尽相同,原则就是对要复用的元素进行整理。...组件的名称要保证通用性,太独立的命名可能不够兼容其他场景,也会让使用的同学产生误解。 对于组件命名,要多与使用的设计师一起探讨,因为每个人的习惯都不同,方不方便因人而异,所以需要做一些平衡。...文字的粗细也是要在一开始的时候就要设置周全,最好是给所有字号的文字都设置好不同粗细的组件,尽管可能开始用不到,但会提升文字的扩展性,不然后面添加就会比较麻烦。...不然在大小这个层级就会出现,虽然是相同尺寸的图标切图范围,但图标的体量看起来却并不一致。 将纯色或渐变图标中的颜色剥离,并使用颜色组件进行嵌套,这样做既方便替换又能减少图标组件库的复杂度。

    66220

    2020前端性能优化清单(二)

    首先要问的一个问题是,您是否可以摆脱使用UI 系统的字体[76]的麻烦?再次检查它们在各种平台上的显示是否正确[77]。如果不是这种情况,您提供的网络字体很有可能会包含字形以及未使用的额外功能和粗细。...在 @font-face 规则中定义 font family 时,使用 local() 值(按名称引用本地字体)已经是非常普遍的做法了: /* Warning!...但是,正如Bram Stein 所指出的[89],“尽管一种本地字体与一种网络字体的名称相同,但它很可能本质上不是同一种字体。许多网络字体与它们的‘桌面’版本不同。...另外,随着字体随着时间的推移而发展,本地安装的版本也可能与网络字体大不相同,字符看起来也大不相同。因此,根据 Bram 的说法,最好不要在 @font-face 规则中混合本地安装的字体和网络字体。...论及 Google Fonts:尽管它最近增加了对字体显示的支持[92],但还是建议大家考虑使用google-webfonts-helper[93],这是一种轻松自如地托管 Google Fonts 的方案

    1.9K10

    打造 Material 字体样式主题 | 实现篇

    其对应的属性是 MDC 的新增内容,使您能够根据不同主题变换不同文字样式。 选择字体样式 厘清应该选择使用何种字体样式以及其中的属性值也许是设计师的责任,也许它们源自您的品牌。...您可以使用本地的 XML 字体 或者 可下载字体。Android Studio 内置了向导以帮助您开始使用可下载字体,包括配置必要的证书和清单元数据。...定义字符的间距 android:textAllCaps 定义是否开启文本大写,是一个布尔值 android:textFontWeight 定义字体的粗细,用于从字族中选择最接近的匹配项,但是只在... 计算字符间距 字符间距在 Android 中使用的测量单位 (em) 与设计工具如 Sketch 使用的测量单位 (tracking) 不同。...设置完成后,在您应用的基本主题中覆写您想要改变的字体样式属性: Google LLC.

    1.7K20

    每个前端开发者都应知道的25个实用网站

    像 WhoCanUse 这样的工具可以让您输入文本和背景颜色代码,并可视化它们在不同视觉障碍人群中的对比度,以及受其影响的人数。 它还展示了在直射阳光下和启用夜间模式时的颜色组合效果。...要使用它们,首先选择你需要的字体,还可以选择所需的字体粗细。 要在你的网站上使用它们,只需复制此代码并将其粘贴到网站的头部即可。...现在你就可以通过在样式表中更改字体系列来开始使用该字体,Google字体提供了你需要更改的属性。 从这里开始,你可以像使用任何字体一样使用它,并相应地更改字体的粗细和大小。...你可以选择你希望字体是相似的,平衡的,或者有高对比度的。 这些字体也可以从Google字体库中下载。...生成字体比例尺 如果你发现自己为字体大小分配随机值,但想要更加一致,typescale.com 提供了你可以实现的比例尺。 该网站也允许你选择字体和字重。

    38440

    「Adobe国际认证」字体与字体有区别吗?字体区别的真正“奥义”秘籍,你掌握了吗!

    字体和字体是两个词汇词,有时会落入设计师的抽认卡堆栈的底部。他们的定义通常永远不会被记住。让我们改变它。 字体与字体 一字型,称为字体家族在CSS,指的是字母和数字(字母怎么看)的设计。...字体是指字体中的不同粗细和大小。 考虑这两个术语的一个有用方法是将字体视为音乐专辑,而字体是构成专辑的歌曲。 这个定义看起来很简单,那么为什么这两个术语会混淆呢? 让我们回顾一下它们的原始用法。...术语字体和字体起源于哪里? 在计算机出现之前(但在恐龙出现之后),“字体”和“字体”这两个词并不容易混淆,因为时代的技术使人们很容易看出它们在基本层面上的不同。 从历史上看,打印机不是数字机器。...每种字体都放置在自己的工作案例中,因为尽管它们属于相同字体的一部分,但每种字体都具有可区分的外观:粗细、宽度、样式、视觉尺寸、等级和效果。...但如果你是一个排版员或者希望扩展您的排版和图形设计知识,请知道这两个术语不是同义词,即使它们今天是这样使用的。

    70000

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

    衬线字体 -- 关键字为 serif,意为有衬线的字体,衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰,而且笔画的粗细会有所不同,这些细节在大写字母中特别明显。 ?...与衬线字体相反,该类字体通常是机械的和统一线条的,它们往往拥有相同的曲率,笔直的线条,锐利的转角。...sans-serif 非衬线字体族 monospace 等宽字体,即字体中每个字宽度相同 cursive 草书字体 fantasy 主要是那些具有特殊艺术效果的字体 新增通用字体族关键字 而在 CSS...Roboto Roboto 是为 Android 操作系统设计的一个无衬线字体家族。Google 描述该字体为“现代的、但平易近人”和“有感情”的。...Roboto,面向 Android 和一些新版的的 Chrome OS Helvetica,Arial,在针对不同操作系统不同平台设定采用默认系统字体后,针对一些低版本浏览器的降级方案 sans-serif

    5K20

    3.字体样式-CSS基础

    一、字体样式 1.常用的字体样式属性 属性 说明 font-family 字体类型 font-size 字体大小 font-weight 字体粗细 font-style 字体风格 color 字体颜色...(3)多个属性值 电脑上安装的字体不尽相同,可能有些字体安装了,有些字体没有安装。...四、font-weight(字体粗细) 在CSS中,使用font-weight属性来定义字体粗细。 注意,字体粗细跟字体大小是完全不一样的,可千万不要弄混了,粗细指“肥瘦”,大小指“宽高”。...其实,italic是字体的一个属性,但并不是所有的字体都有italic属性。...① 关键字 关键字就是颜色的英文名称。 ② 16进制RGB值 在开发中,单纯靠关键字满足不了实际开发需求,因此引入了16进制RGB值。 16进制RGB值类似于#00FFFF形式的值。

    3.1K10
    领券