帶輪廓和文字陰影的文字

我想創建以下字體樣式。如果不可能，我想盡可能地接近這種風格。我需要支持IE，所以我不能使用text-stroke。帶輪廓和文字陰影的文字

我來最接近的方法是使用多text-shadow屬性，例如：

h1 { 
 
    color: #2e536f; 
 
    font-weight: bold; 
 
    font-family: sans-serif; 
 
    font-size: 7em; 
 
    text-transform: uppercase; 
 
    text-shadow: 
 
    -1px -1px 0 #fff, 
 
     1px -1px 0 #fff, 
 
    -1px 1px 0 #fff, 
 
     1px 1px 0 #fff, 
 
    -2px -5px 0px #ff7c7c; 
 
} 
 

 
body { 
 
    background: #2e536f; 
 
}

<h1>Zwei</h1>

雖然它幾個任務，我不能讓顏色透明，以揭示它背後的文字陰影。

我該如何解決這個問題？

來源

2017-01-05 Marian Rick

爲什麼不使用SVG ？ –

@JacobGray考慮有更長的文字。然後，您可以在移動設備上縮放文本（可能會變得非常小）或創建不同換行符的多個版本。因此，創建一個SEO友好的CSS解決方案似乎更具有可擴展性，特別是如果有多個標題具有相同的風格。 –

我認爲這將有助於你實現這個解決方案。 http://jsfiddle.net/kovalchik/yJff9/ –

body { 
 
    background: #2e536f; 
 
} 
 

 
h1 { 
 
    color: #2e536f; 
 
    font-weight: bold; 
 
    font-family: sans-serif; 
 
    font-size: 7em; 
 
    text-transform: uppercase; 
 
    text-shadow: 
 
    -1px -1px 0 #fff, 1px -1px 0 #fff, 1px 1px 0 #fff, 1px 1px 0 #fff, 2px -5px 0px #ff7c7c 
 
}

<h1>Zwei</h1>

這可以接近你期望的輸出？

來源

2017-01-05 13:22:41

如果你需要支持IE，你最好的選擇是去SVG。你可以很容易地給筆觸和/或陰影文字作出你正在尋找確切的風格。這可以適應標題，但可能是跨越多行的文本的麻煩。
這裏是一個內嵌SVG的例子：

body { 
 
    background: #2e536f; 
 
} 
 
svg { 
 
    font-weight: bold; 
 
    font-family: sans-serif; 
 
}

<svg viewbox="0 0 10 3"> 
 
    <text font-size="3" x="1.5" y="2.5" dx="0" dy="0" fill="#FF7C7C">ZWEI</text> 
 
    <text font-size="3" x="1.5" y="2.5" dx="0.1" dy="0.15" fill="transparent" stroke="#fff" stroke-width="0.08">ZWEI</text> 
 
</svg>

注意，使用SVG（甚至是標題）不會影響搜索引擎優化和google indexes SVG since 2010

來源

2017-01-05 15:48:03

工作雖然這是一個很好的方法，一個CSS解決方案將更加靈活。例如，如果用一整句替換文本，則svg會縮小並變得非常小。雖然沒有換行符。使用'text-stroke'完全沒有問題。也許我只需要讓一些時間通過，直到它的微軟支持。（Text-stroke version：http://codepen.io/anon/pen/pRvpqN?editors=1100） –

我明白你的意思@MarianRick，但我不知道如何實現你的目標風格並支持IE同時。 –

多數民衆贊成在悲傷;）感謝您的建議。雖然看到谷歌索引SVG很好理解！ –

帶輪廓和文字陰影的文字

回答

相關問題