鍍金池/ 問答/HTML/ 小程序描邊字體實現(xiàn)方案

小程序描邊字體實現(xiàn)方案

需求：
帶描邊的字體，包含中文、數(shù)字，要求實現(xiàn)效果與PS制作的設(shè)計圖效果一致

環(huán)境：微信小程序

已嘗試的實現(xiàn)方案：

  • text-shadow: 設(shè)置“上下左右”“左上右上左下右下”八個方向?qū)嶊幱?/li>
.text {
    font-size: 48rpx;
    color: #fff;
    text-shadow: 3px 0 0px #000, -3px 0 0px #000, 0 3px #000, 0 -3px #000, 3px 3px #000, -3px -3px #000, 3px -3px #000, -3px 3px #000;
    font-weight: 900;
}

效果勉強，但達不到期望

  • -webket-text-stroke: 描邊
.text {
    font-size: 48rpx;
    color: #fff;
    -webkit-text-stroke: 2px #000;
    font-weight: 900;
}

描邊會占據(jù)字體原本大小，描邊稍微粗一點，就會將字體填充顏色擠壓沒了

  • SVG: text
<svg>
  <text x="10" y="40" class="text">SVG 1000 20</text>
</svg>

body {
      background-color: #e54e5f;
    }
.text {
      fill: #fff;
      stroke: #000;
      font-size: 36px;
      font-weight: bolder;
      font-family: sans-serif;
      stroke-width: 3px;
      stroke-linejoin: round;
    }

效果與text-stroke一樣，描邊會占據(jù)字體本身大小

問題：請問還有哪些實現(xiàn)字體描邊的方案，能較好地實現(xiàn)描邊字體？

回答
編輯回答
青瓷

SVG可以試試paint-order屬性，不過不保證兼容性。可以參考優(yōu)雅的輪廓與 SVG paint-order這篇。

2017年1月26日 18:46
編輯回答
毀與悔

文字描邊沒有非常完美的方案。不過有一個相對來說比較好的方案，如下：

.text {
    position: relative;
}
.text::before, .text::after {
    content: attr(data-text);
    font-size: 48rpx;
    color: #fff;
    font-weight: 900; 
}
.text::before {
    -webkit-text-stroke: 8rpx #000;
}
.text::after {
    position: absolute;
    top: 0;
    left: 0;
}
<div class="text" data-text="描邊文字"></div>

可以通過 text-stroke 來調(diào)整邊緣組細

2018年7月5日 01:04