css 字体粗细值如何工作?

2023-11-21

我不明白字体粗细值。当我将其更改为粗体、正常或 600+ 时,也会更改字体。但将其更改为 100 至 500,不会改变任何内容。为什么有这些价值观?


The font-weight从 100 到 900 的值反映了设计不同粗细字体的排版实践。很少有字体具有所有这些粗细,但已选择比例来或多或少地覆盖所使用的不同粗细。 CSS3 字体草案描述了一致数字和传统印刷术语(例如“薄”、“超轻”等)之间存在差异,但术语确实有所不同。

在印刷术中,每种粗细都是由印刷师设计的单独字体。这就是为什么大多数字体只有两种或可能只有一种粗细的原因之一:设计字体需要时间,而时间就是金钱。特别适用于网络上使用的字体的另一个原因是显示设备相当粗糙,使得精细的排版通常成为毫无意义的尝试。特别是,小字体高度在低分辨率设备上效果不佳。

CSS 规范定义了一种将声明的字体粗细映射到可用粗细的算法。例如,当只有权重 400 和 700 可用时(通常情况),则权重 100、200 和 300 映射到 400。

然而,在某些情况下,浏览器会根据算法使用粗体字形。这与其说是一个解决方案,不如说是一个问题,并且由于浏览器的差异,如果您要求不存在的权重,可能会导致奇怪的事情。如果请求的粗细为 600 或更大并且字体只有普通 (400) 字体,大多数浏览器似乎会使用算法加粗。例如,设置font-weight: bold当文本采用 Arial Unicode MS(没有粗体字体)时,会创建 Arial Unicode MS 的人为粗体版本。

常用字体还存在其他问题。有时您需要像使用字体名称一样使用字体名称,例如font-family: Arial Black而不是逻辑设置font-family: Arial; font-weight: 900。有时这不起作用,因为从some浏览器仅以逻辑方式工作。

一般来说,不要尝试使用正常和粗体以外的其他粗细unless您通过以下方式使用可下载字体(网络字体)@font-face,这使您可以控制字体粗细问题。大多数可下载的字体仅包含两种基本粗细,或仅包含一种,但也有一些有趣的免费字体,具有多种粗细。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css 字体粗细值如何工作? 的相关文章

  • :target 伪类在 Firefox 中无法正常工作

    我正在使用 target 伪类制作一个具有 CSS 灯箱类型效果的页面 当您单击图像时 会弹出一个包含信息的框 当您单击任意位置时 该框会再次消失 它在 Chrome 和 IE 中运行良好 但在 Firefox 中存在一个奇怪的错误当您将鼠
  • 具有一个 css 类的堆叠图标

    在新的 FontAwesome 4 0 0 中 堆叠项目有 css 样式 span class fa stack i class fa fa square o fa stack 2x i i class fa fa twitter fa s
  • 如何在 Bootstrap 4 中垂直对齐?

    我试图在 Bootstrap 4 4 0 0 alpha 6 中将我的大屏幕的内容垂直对齐在中心 在 Mac 桌面上的 Chrome 和 Safari 中 这种情况发生得很好 但在我的 iOS 设备上则不然 文本仍然与顶部对齐 我强制大屏幕
  • 编辑角度材质的表格单元格填充

    当我使用开发人员工具检查该元素时 它显示零填充 但是当我查看它并将鼠标悬停在它上面时 它非常清楚地在单元格内具有填充 我不知道这是从哪里来的 并且设置td padding 0 important 什么也没做 感知到的填充是由以下原因引起的d
  • Rails Active Admin css 与 Twitter Bootstrap css 冲突

    我对 Rails 资产管道有点陌生 所以我可能做错了什么 我正在尝试为我的后端使用 Active Admin 为我的前端应用程序使用 twitter bootstrap css 我将 bootstrap css 添加到 应用程序 资产 样式
  • 底部页脚的 css 布局,动态 ajax 内容更改页面高度

    Update 实际上 我现在通过放弃固定页脚设计来解决这个问题 动态内容移动页脚并适当调整容器大小似乎没有问题 除非页脚最初固定在浏览器底部 我希望其他人最终能够提供一个兼具两全其美的出色解决方案 I spent all day tryin
  • 带有 `:hover` 和多个相邻兄弟选择器的 Webkit 错误

    Safari 和 Chrome 以及 Opera 和 Firefox 都可以处理 hover伪类和相邻兄弟选择器 a hover div 这有效 但是 当添加另一个相邻兄弟时 div hover a div Webkit 崩溃了 但是 如果

  • 有多少像素? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 一个有多少像素 br 标签添加 我知道 br 高度可以通过CSS控制line height财产 不同浏览器的值是否相同 它会添加与浏览
  • MVC4 捆绑:由于 css3 功能而缩小失败?

    我想使用 MVC4 捆绑和缩小 但我总是在未缩小的 css 文件中收到此错误消息作为注释 Minification failed Returning unminified contents 534 29 run time error CSS
  • window.open 使用 css 样式

    我想设计我的 window open 目前 我的网页上有一些项目由于解析了某个类而打开 然后在新窗口中打开指定的文本 我想更改字体大小 字体和填充等 这是我的 JavaScript 代码
  • 控制缓存过期

    通过 Google 网站管理员工具的 PageSpeed 分析器运行我的网页后 它向我报告我的资源没有被缓存 下面是我的 htaccess 文件中直接取自 H5BP 的代码 我是否正确地假设以下过期时间设置正确 但我的实现中出现了问题 或者
  • ::after 内联 HTML 电子邮件?

    banner width 34px height 52px position relative color white font size 11px letter spacing 0 2em text align center float
  • 在具有不同边框的 div 上调用函数

    我有一个div对于一个名为 ball 的类 div 的每个边缘都有一个边框 顶部边框 左侧边框等 当用户单击每个边框上的边框时 我想用 JavaScript 触发不同的事件 例如 用户点击边框顶部console log top 等等 HMT
  • 无限水平滚动图像循环?

    所以我试图在我的网站上创建一个无限滚动动画 但我一直在努力 原始教程在这里 使用 6 张图像 最后重复 4 张图像以实现无缝过渡 https designshack net articles css infinitephotobanner
  • 如何防止桌面浏览器(Chrome、Safari)缩放网页

    我尝试使用以下元视图端口标记来防止浏览器缩放 但这不起作用 我知道这是可能的 因为我的缩放在此网站上被阻止 未来主义 xyz http futurism xyz 该网站的视口标签是这样的
  • 如何检测被覆盖的 CSS 属性?

    I can get all css properties for an element with document stylesheets but some of those are not active because those pro
  • CSS 未在 Django 项目中加载?

    我是 Django 新手 但负责该项目的前端工作 我一直在研究如何准确加载 css 文件 但我发现这些方法不起作用 这是 html 文件布局 load static
  • a:悬停颜色不起作用

    一件很奇怪的事情 我想在悬停时更改链接的文本颜色和背景颜色 这是代码 css link menu a color white display block height 100 width 100 text decoration none t
  • 在 Chrome 中隐藏 HTML 时间输入字段上的图标

    在 Chrome 中 当您type time 属性到输入框 您会在输入旁边看到一个小图标时钟图标 有没有办法去掉这个小时钟图标 基于这个问题的答案 将日期输入三角形更改为日历图标 https stackoverflow com questi
  • 中有样式表 吗?

    在内部链接 CSS 文件是一个坏主意吗 body 我读过 如果浏览器在外部找到另一个 CSS 文件 则它会被迫重新开始 CSS 渲染 head 只是因为它可能需要将样式应用于已经渲染的元素 另外 我认为 HTML 无法正确验证 我需要确认这

随机推荐

  • 使用 CSS 将背景图像设置在列表中的背景颜色之上

    这是代码 ul li class test a href h2 Blah h2 p Blah Blah Blah p a li ul 基本上 我的列表已经有一些样式 例如 我为其设置了背景颜色 现在在 测试 类中 我还设置了背景图像 我的问
  • 在引导程序中使列具有相同的高度

    我在一行中有三列 我希望所有三列具有相同的高度 填充整个空白区域 目前 它看起来像这样 如您所见 左栏是正确的高度 中间和右边没有的地方 它的脚手架看起来像这样 div class container div class row div c
  • 强制 iOS Facebook 应用程序在浏览器中而不是 WebView 中打开提要链接

    在投票 标记之前 请注意已经有类似的问题 但它们都不能使用纯 JavaScript 每当在 iOS 设备上单击 Facebook Feed 上的链接 仅通过 facebook 应用程序 时 它将在 WebView 中打开 而不是在新的浏览器
  • python:我什么时候可以打开生成器的包装? [复制]

    这个问题在这里已经有答案了 它在幕后是如何工作的 我不明白以下错误的原因 gt gt gt def f yield 1 2 yield 3 4 gt gt gt f File
  • 将 SQL CE 4 部署到 IIS 7 - 需要特殊权限吗?

    我有一个使用新 SQL CE 4 CTP 的 ASP NET 4 站点 该站点在本地 Win7 上的 IIS 7 5 运行良好 在 Server 2003 IIS 6 中运行良好 部署到 Server 2008 上的 IIS 7 时失败 我
  • 什么是 |和 << 是什么意思?

    抱歉 如果这是一个常见问题 但我不知道它叫什么 所以我在搜索时遇到了困难 这是如何运作的 view autoresizingMask UIViewAutoresizingFlexibleWidth UIViewAutoresizingFle
  • asp.net web api 2 CORS和身份验证授权配置

    我创建了一个具有个人帐户安全性的 asp net web api 2 服务 我尝试按照以下示例从 AngularJs 中调用它 http www codeproject com Articles 742532 Using Web API I
  • 关于C#中不明确调用的问题

    我有一个问题 虽然不是真正的问题 但让我有点好奇 我有一个类 其中有两种方法 一种是静态方法 另一种是实例方法 这些方法具有相同的名称 public class BlockHeader public static BlockHeader P
  • 使用docker进行谷歌云数据流依赖

    我对使用 Google Cloud Dataflow 并行处理视频感兴趣 我的工作同时使用 OpenCV 和张量流 是否可以只在 docker 实例内运行工作程序 而不是按照所述从源安装所有依赖项 https cloud google co
  • 在 PHP 中将新的键/值对添加到 JSON 中

    我的 MySQL 数据库有一个结果 我用 PHP 进行了 json 编码 结果看起来像 id 8488 name Tenby area Area1 id 8489 name Harbour area Area1 id 8490 name M
  • 如何将库添加到 Xamarin 参考列表

    是否有地方可以放置库 dll 以便它们显示在要选择的项目的引用列表中 我知道我可以从我的个人库中手动添加它们 但是我希望能够将它们添加到可用列表中 因此我所需要做的就是选择它们 我认为会有某种方式来表明它们适用于哪个平台 在 编辑引用 下
  • CefSharp - 获取 HTML 元素的值

    如何使用 CefSharp 获取 HTML 元素的值 我知道如何使用这个默认的 WebBrowser 控件 Dim Elem As HtmlElement WebBrowser1 Document GetElementByID id 但我没
  • 使用 gradle 构建库项目时 BuildConfig.DEBUG 始终为 false

    当我在调试模式下运行应用程序时 BuildConfig DEBUG 不起作用 逻辑上设置为 false 我使用 Gradle 来构建 我有一个图书馆项目 我在其中进行此检查 BuildConfig java 在构建调试文件夹中看起来像这样
  • App Store 下载 dSYM 中缺少 UUID dSYM(更多目标应用程序)

    我在使用 iOS 应用程序 XCode 10 3 时遇到以下问题 Crashlytics 说我缺少 dSYM 并提供了缺少的 dSYM UUID 我缺少必需的和可选的 UUID 该应用程序是BitCode应用程序 dSYM是从AppStor
  • Dygraphs 中的散点图?

    如何使用 dygraphs 绘制散点图 数据如下所示 X 轴可能有 5 20 个值 类别 Y 值可能是 x 轴上每个值 1 10 个值 这是我需要的一个例子 这在 Dygraphs 中可能吗 谢谢 迈克尔 您可以设置 strokeWidth
  • 如何在React js中读取xml文件(data.xml)?

    我尝试读取 xml 文件并解析它react xml parser图书馆 var XMLParser require react xml parser var xml new XMLParser parseFromString xml str
  • 2 个列表的交集和并集

    我正在开始学习 prolog 我使用 SWI prolog 我做了一个简单的练习 其中我有 2 个列表 我想计算它们的交集和并集 这是我的代码 效果很好 但我问自己是否有更好的方法 因为我不喜欢使用剪切操作员 intersectionTR
  • AspectJ:切入点中的参数

    我使用 AspectJ 来建议所有具有所选类参数的公共方法 我尝试了以下方法 pointcut permissionCheckMethods Session sess execution public Session args sess 这
  • 无法通过 SSL 使用 Amazon S3 API?

    我正在尝试使用 Amazon S3 API 加密和上传文件 public class AmazonS3 String KmsId my id comes here private TransferManager getTransferMan
  • css 字体粗细值如何工作?

    我不明白字体粗细值 当我将其更改为粗体 正常或 600 时 也会更改字体 但将其更改为 100 至 500 不会改变任何内容 为什么有这些价值观 The font weight从 100 到 900 的值反映了设计不同粗细字体的排版实践 很