我有一个锁屏小部件,它使用 .js 文件来设置时钟元素的样式。问题是,根据墙纸的不同,时钟的颜色有时很难看清(深色背景上的黑色)。我找到了改变时钟文本颜色的元素,但这还不够。我希望能够为其添加笔触,使其具有厚度和双色。这样无论背景如何,阅读起来都会一目了然。
实际的元素是这样的:
var elements = {
"zclock": {
"z-index": 2,
"color": "gray", <--- This changes color of clock text
"webkit-text-stroke-width": "3px",
"font-family": "sanfranlight",
"position": "absolute",
"font-size": "51px",
"top": 0,
"left": 1,
"width": "119px",
"text-align": "right",
"font-weight": "100"
},
<omitted rest>
};
我试过使用名为 -webkit-text-stroke-width
的东西,但没有用。也许我输入错误,因为它只在在线示例的 css 文件中引用过。
这适用于 iPhone/iOS,因此它可以是 Safari 使用的任何 webkit。
最佳答案
你好,
您也可以尝试向该对象添加“-webkit-text-stroke-color”属性,并可能增加“字体粗细”。您代码中的“webkit-text-stroke-width”属性可能还需要一个前导“-”才能工作。
.element{
color: #fff;
font-weight: 700;
font-size: 51px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: black;
}
另见 -webkit-text-stroke-width和 -webkit-text-stroke在 MDN 上。
真诚的, 山姆。
关于javascript - 如何在 javascript 中为 html 样式添加描边?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53677732/