如何在JavaScript中为HTML样式添加笔触？

Question

我有一个锁屏窗口小部件，它使用.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。

Answer 1

Hellow

您也可以尝试向该对象添加“ -webkit-text-stroke-color”属性，并且可能会增加“ font-weight”。您代码中的“ webkit-text-stroke-width”属性可能还需要前导“-”才能起作用。

Example in pure CSS / HTML

.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;
}

另请参见MDN上的-webkit-text-stroke-width和-webkit-text-stroke。

此致， 山姆

Answer 2

也许您正在使用IE 11，并且public static void write(User app, String filepath, Context context) throws IOException { FileOutputStream fos = context.openFileOutput(filepath, Context.MODE_PRIVATE); ObjectOutputStream oos = new ObjectOutputStream(fos); oos.writeObject(app); oos.close(); fos.close(); } 不能正常运行，因为它不受支持：see here

您可以尝试使用的是-webkit-text-stroke。 See supported browsers here

here

很好地解释了