zh-CN 简体中文 项目首页 CDN引入方式 NPM安装 import引入方式 require引入方式 如何使用metal-outline-text.css 如何使用metal-outline-text.js 在线演示 常见用例 引用metal-outline-text
metal-outline-text文档
欢迎广大开发者将此文档翻译为其他语言。
CDN引入方式
可选引入metal-outline-text.js

<script src="https://unpkg.com/metal-outline-text@1.0.0/metal-outline-text.js"></script>

可选引入metal-outline-text.css

<link rel="stylesheet" href="https://unpkg.com/metal-outline-text@1.0.0/metal-outline-text.css">

NPM安装

$ npm install metal-outline-text

import引入方式

import MetalOutlineText from 'path/to/metal-outline-text';

require引入方式

const MetalOutlineTextClass = require("path/to/metal-outline-text");

如何使用metal-outline-text.css
银色轮廓效果

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"

如何使用metal-outline-text.js
初始化样式

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);

返回当前样式的CSS代码

metalOutlineText.getCSSCode();

返回当前样式的CSS文本

metalOutlineText.getCSSText();

在线演示
使用metal-outline-text.css
使用metal-outline-text.js
常见用例
直播

在直播时需要吸引眼球的轮廓效果

视频录制

在录制视频时需要特殊风格的文字,和普通的字幕区分开

网站开发

根据主题,不同的网站往往需要不同的文字风格

引用metal-outline-text
如果你在学术研究中涉及metal-outline-text,那么可以按需引用以下内容。
metal-outline-text源码(BibTeX)

@misc{CNOCTAVE2025, author = {Yu Hongbo, }, title = {metal-outline-text}, year = {2025}, howpublished = {\url{https://github.com/CNOCTAVE/metal-outline-text}}, }

metal-outline-text文档(BibTeX)

@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}, }

© 2024-2025 CNOCTAVE © 2024-2025 Yu Hongbo