代码之家 › 专栏 › 技术社区 › joedevon

我需要把一个设计师的字体和类似的网页字体相匹配

fonts layout css

1

joedevon · 技术社区 · 16 年前

我不知道这是一个插画规格,还是在哪里,但设计师给了我这个规格的字体:

Helvetica Neue(T1),35薄,20 pt,关/454545,开/70A63A

页面的不同区域还有其他类似的,但是如果你能告诉我如何使用CSS来匹配这个区域,希望我能找出其他区域。

谢谢!

3 回复 | 直到 16 年前

1

Rex M 16 年前

这将使您在所有平台上尽可能接近:

font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight:100;
font-size:20pt;

2

3

Zoidberg 16 年前

这可能很困难,因为所有浏览器只支持一小部分字体,并且在一个浏览器中与另一个浏览器中看起来完全不同(请参见firefox与ie中的fantasy-type字体)。

这里有一些CSS可以让你开始

.myCss {font-family:Helvetica;font-size:20pt;font-weight:100;color:#454545}
.myCss:hover {color:#70a63a}

在当前浏览器中,字体粗细几乎支持正常和粗体。但在新的浏览器中,范围从100到900,700个是今天的粗体,400个是今天的正常。

注意:Hover只在愚蠢的IE6中使用链接元素,对它的支持在IE7中更好,在Firefox中更好。

3

1

Sam DeFabbia-Kane 16 年前

字体名称是Helvetica Neue。T1表示PostScript类型1。35瘦是指重量/变化。20 pt为尺寸。关和开是颜色。

Helvetica Neue(或Helvetica或Arial——这三者都非常相似)几乎在每台计算机上都存在。细微的变化并非如此。我建议做字体系列Helvetica Neue,Helvetica,Arial,字体大小:20pt,并将字体重量设置为尽可能低的100。Helvetica/Arial的某些变体可能没有较轻的字体粗细变体,因此设置字体粗细可能不起任何作用。

如果你绝对需要准确的字体(如果你的设计师在为网页设计时除了标题以外,还希望在任何地方都有这样的字体,你需要去和所说的设计师谈谈),你可以使用 SIFR 或图像。