6

假设我使用font-size:30px;and font-family:Verdana;。

在此处输入图像描述

我需要那些字母大而薄，所以我尝试了font-weight:lighter;。

然而没有任何改变，有些字体会变小，有些不会受到影响。

如何创建大而细的字母？CSS中有没有办法，或者这些是特定的字体？

4

6 回答 6

5

这是我想出的最接近的东西。

div{
    font-family:Verdana;
    font-size:30px;
    font-weight:100;
    -webkit-text-stroke-color: rgb(255,255,255);
    -webkit-text-stroke-width: 1px;
    -webkit-font-smoothing: antialiased;
}

问题：
1. 仅适用于 webkit 浏览器（Safari，Chrome）
2. 如果文本后面的背景不是纯色，则可以看到它是文本笔划。
http://jsfiddle.net/dru87/

于 2013-03-11T03:20:07.200 回答
3

由于字体不支持某些粗细，要实现更精简的 Verdana 版本，您必须托管自己的字体版本，或使用已托管的其他字体来实现您的外观。

某些字体不支持自己的较轻/较重的版本-如果支持，它们可能与 CSS 数字比例不对齐（正如您所指出的）。

从这里。

因为这么多专业品质的网络字体有不同的权重，现在使用数字比例比我们只需要处理“正常”（400）和“粗体”（600）时更有意义。通常，家庭的权重可以映射到这些值：

100：超轻

200：薄

300：光

400：常规

500：半粗体

600：粗体

700：超粗体

800：重

900：超重型

注意关键字，那里：通常。可悲的是，现实情况是许多字体不符合这种模式，比如当一个家族有大量的权重，或者他们自己的定义不一定符合标准比例时。

因此，长话短说，您将不得不托管字体的“更薄”版本（您制作/下载的字体），或者使用不同的字体。

IMO Tahoma、Hedley 或 Geneva 是外观相似的字体，但这些字体并非免费提供 - 您可以在Google 字体上查找一些，您和@minitech都指出。

于 2013-03-11T05:20:34.510 回答
1

选择细字体并应用bigtext.js/fittext.js或slabtext.js

于 2013-03-11T06:26:13.613 回答
1

并非所有字体都支持所有宽度。如果您正在寻找一些好的细字体。你可以看看这些瘦谷歌字体列表。它们是免费且易于实施的。

于 2013-09-13T16:23:23.700 回答
0

使用font-weight意味着从字体系列中要求不同粗细的字体（特定字体）。Verdana 字体系列没有比正常字体更轻的字体，因此您可以正常使用。这适用于您通常可以在网页上使用的大多数字体。

例如，在Google Web Fonts中，您可以找到许多字体比正常字体更轻的字体系列，例如 Source Sans Pro 的粗细为 200 和 300。

注意：字体的亮度与字体有关。字体系列中的浅色（200）可能对应于另一个字体系列中的正常（400）。

于 2013-03-11T06:10:44.490 回答
0

第 1 步：包括从 Google 加载字体

https://fonts.googleapis.com/css?family=Lato:100italic' rel='stylesheet' type='text/css'> https://fonts.googleapis.com/css?family=Lato:100' rel ='样式表'类型='文本/css'>

Step2: 添加以下css属性 .text{ font-family: Lato, sans-serif;

字体粗细：100；

字体大小：7em；}

完毕！

肯定会工作

欲了解更多信息，请访问http://tobiasahlin.com/typesource/01-elements-of-html-and-css/

于 2017-09-07T15:39:58.107 回答