<script src="https://unpkg.com/metal-outline-text@1.0.0/metal-outline-text.js"></script>
<link rel="stylesheet" href="https://unpkg.com/metal-outline-text@1.0.0/metal-outline-text.css">
$ npm install metal-outline-text
import MetalOutlineText from 'path/to/metal-outline-text';
const MetalOutlineTextClass = require("path/to/metal-outline-text");
class="metal-outline-text-silver"
class="metal-outline-text-darksilver"
class="metal-outline-text-brightsilver"
class="metal-outline-text-gold"
class="metal-outline-text-darkgold"
class="metal-outline-text-brightgold"
class="metal-outline-text-bronze"
class="metal-outline-text-darkbronze"
class="metal-outline-text-brightbronze"
class="metal-outline-text-rosegold"
class="metal-outline-text-darkrosegold"
class="metal-outline-text-brightrosegold"
class="metal-outline-text-titanium"
class="metal-outline-text-darktitanium"
class="metal-outline-text-brighttitanium"
class="metal-outline-text-verdigris"
class="metal-outline-text-darkverdigris"
class="metal-outline-text-brightverdigris"
class="metal-outline-text-bluevitriol"
class="metal-outline-text-darkbluevitriol"
class="metal-outline-text-brightbluevitriol"
const metalOutlineText = MetalOutlineText.init(colors, className = 'metal-outline-text');
其中,colors是一个包含所有颜色的数组,传入8个色值,例如:['#A9A9A9', '#E5E5E5', '#A9A9A9', '#E5E5E5', '#A9A9A9', '#E5E5E5', '#A9A9A9', '#E5E5E5']
如果调用多次init()方法,且className相同,那么样式将被覆盖
metalOutlineText.addTo(element);
metalOutlineText.removeFrom(element);
metalOutlineText.getCSSCode();
metalOutlineText.getCSSText();
在直播时需要吸引眼球的轮廓效果
在录制视频时需要特殊风格的文字,和普通的字幕区分开
根据主题,不同的网站往往需要不同的文字风格
@misc{CNOCTAVE2025, author = {Yu Hongbo, }, title = {metal-outline-text}, year = {2025}, howpublished = {\url{https://github.com/CNOCTAVE/metal-outline-text}}, }
@techreport{CNOCTAVE2025, author = {Yu Hongbo, }, title = {metal-outline-text Document}, institution = {BA DU XIN SHANG}, year = {2025}, number = {16}, month = {6}, url = {https://cnoctave.github.io/metal-outline-text/index.html}, urldate = {2025-06-16}, }