如何在使用網絡字體的瀏覽器之間實現一致的換行符

我試圖讓字體在應用程序中的換行符必須一致的情況下跨瀏覽器同等呈現。內容是用戶生成的。如何在使用網絡字體的瀏覽器之間實現一致的換行符

粗體使字母變寬。使用默認的瀏覽器字體時，當文本被包裝在容器中時，該行會較早斷開。

使用網頁字體時，在Chrome中應用粗體時線條不會變長，但會在資源管理器中顯示。這導致跨瀏覽器的不一致的換行符。

更新： Firefox的行爲與瀏覽器相同（網頁字體文本在應用粗體時延長）。 chrome中的非網頁字體的行爲與其他瀏覽器中的相同。很顯然，Chrome（版本47）與Web字體呈現異常，因爲這是行爲不同的唯一情況。我打開了一個鏈接到這個問題的bug report。

Simplified test case

HTML

<h2>will break in chrome and explorer:</h2> 
<div> 
hover to make the text bold and break the line! 

</div> 

<h2>will break in explorer only:</h2> 
<div class="web-font"> 
hover to make the text bold and break the line! 

</div>

CSS

@font-face { font-family: 'roboto'; src: local('roboto'), url(https://themes.googleusercontent.com/static/fonts/roboto/v9/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'); 

} 

div{ 
    width:380px; 
    height:100px; 
    border:5px solid gray; 
    font-size:20px; 
    margin-bottom:10px; 
} 

.web-font{ 
    font-family: 'roboto'; 
    font-size:18px; 
} 

div:hover{ 
    font-weight:bold; 
}

我測試既.TTF和.woff格式具有相等的效果。

我試着調整CSS屬性，如字母和單詞間距，但當然結果會因文本而異，所以這不是可變內容的可行解決方案。

來源

2016-01-13 CodeToad

你有沒有在你的CSS嘗試：字突破：保全部或文字換行：正常嗎？ –

word-break：keep-all和/或word-wrap：normal在測試用例中不起作用。 – CodeToad

你可以創建一個jsfiddle或jsbin嗎？將更容易嘗試和解決:) –

也許是一個工作？

div:hover{ 
    text-shadow:0 0 1px Black; 
}

代替：

div:hover{ 
    font-weight:bold; 
}

http://codepen.io/anon/pen/MKOgYw

來源

2016-01-18 05:30:02

非常聰明和有創意的解決方法:)它得到了較重的繪畫和渲染成本的權衡，它會改變生產中的現有內容，所以我不確定我是否可以使用這個，但肯定是一個聰明的方法來解決問題：） – CodeToad

如何在使用網絡字體的瀏覽器之間實現一致的換行符

回答

相關問題