2012-01-05 245 views
48

我正在進行Photoshop-XHTML轉換,網站設計人員使用Myriad Pro半粗體字體在photoshop文件中很好,但是當我嘗試CSS中的半粗體選項時,它看起來非常像普通的粗體字體,對於我的目的來說這太粗暴了。有沒有辦法在HTML和CSS中實現更漂亮的半粗體字體,或者我只是堅持'font-weight:600'?如何通過CSS設置「半粗體」字體? 600的字體重量不會使它看起來像我在Photoshop文件中看到的半粗體

+0

你可以發佈你的代碼jsfiddle,所以我們可以重現你的錯誤? – 2012-01-05 00:18:11

回答

36

實用的方法是設置font-family到是的semibold版本的具體名稱的值,如

font-family: "Myriad pro Semibold" 

如果是這樣的名字。 (我個人用我自己的font listing tool,它運行在互聯網  Explorer只在CSS爲可用的名字,看在我的系統中的字體。)

在這種方法中,font-weight不需要(也可能是最好不要設置)。

Web瀏覽器在實現字體重量方面一直很差:他們很大程度上找不到具體的重量版本,除了粗體。解決方法是在字體名稱中包含信息,儘管這不是應該如何工作的。

使用Segoe UI進行測試,它通常存在於Windows系統上的不同字體重量版本中,我能夠製作Internet   Explorer 9在使用邏輯方法時選擇適當的版本(使用字體系列名稱Segoe UI和不同font-weight值),但在Firefox 9和Chrome 16上失敗(只有正常和大膽的工作)。在所有這些瀏覽器上,例如,設置font-family: Segoe UI Light工作正常。

+1

這似乎沒有工作:( – 2012-05-11 12:04:48

+1

@Django Reinhardt,你是否檢查過,你使用的名字是指你在系統中實際使用的字體,在那個名字下? – 2012-05-11 12:08:47

+1

是的。它可以在Photoshop中看到Chaparral Pro - 將權重設置爲Semibold,但「Chaparral Pro Semibold」恢復爲Times。 「Chaparral Pro」的作品,就像錯誤的重量一樣。謝謝你的幫助。 – 2012-05-11 12:19:44

18

對我而言,以下作品不錯。只需添加它。您可以按照您的要求進行編輯。這只是我使用的一個很好的技巧。

text-shadow : 0 0 0 #your-font-color; 
+0

這是有用的是一些情況。不知道爲什麼人們低估了你的喜好。 – SinisterGlitch 2014-06-02 14:01:56

+0

是的,這是非常有用的黑客攻擊,可能是不正確的解決方案,但它給了我正在尋找的確切解決方案..謝謝拉傑.. – harishkumar329 2015-04-17 05:42:50

+0

哈克但有用! – 2016-01-26 14:28:07

46

在CSS中,爲font-weight屬性值:normal默認數值400,和bold到700

如果要指定其他的權重,你需要給數值。該數字值需要支持您正在使用的字體系列

例如,你將定義半粗體這樣的:

font-weight: 600; 

在這裏使用的「打開三世」字體族,裝載着上述重量JSFiddle

+0

這個答案與這個[鏈接](http://stackoverflow.com/questions/2436749/how-to-define-bold-italic-using-font-face)中的答案比定義sembrold的新名稱更好 – besabestin 2014-06-15 11:20:45

+0

字體 - 家庭:'公開賽'; font-weight:600;重要的是要添加字體家族 – Martian2049 2016-08-31 02:45:10

+0

當你繼承家庭但想改變體重時,這是一個更好的選擇。 – 2017-11-15 08:20:03

1

font-family:'Open Sans'; font-weight:600;重要的是改變以不同的字體家族

1

年中期,2016年鉻引擎(V53)只支持3強調風格:

純文本,粗體和超大膽...

<div style="font:normal 400 14px Arial;">Testing</div> 

<div style="font:normal 700 14px Arial;">Testing</div> 

<div style="font:normal 800 14px Arial;">Testing</div>