Question

注意：这是关于矢量技术的问题

我最初没能说得那么清楚。（我包括＆＃34;在标题中使用CSS和SVG＆＃34;但几乎没有再提及它。）

另外：我是一名长期的图形程序员，正在制作SVG和Javascript。我主要是一名数学家;抵消路径和交叉非常复杂的事情对我来说是一种娱乐。我想提一下早些时候可能有用;我们活着，我们学习......

这是一个很好的例子，我的意思是空的＆＃39;部分字体：

这些片段是Unicode字符 - 因此可以将它们从SVG复制到文本编辑器 - 正如您所看到的，方形颜色会干扰它们的外观。改变＆＃39;填充＆＃39;绝对是错的;整个字符会改变颜色，并且仍将那些相同的空窗口留在下面的方形颜色上。

如果我能够达到用角色的纯白色轮廓支撑每个人的效果，他们当然会看起来更好。如果我只有每个的最外面的轮廓，作为一个封闭的路径，这将变得容易。（但这有可能吗？是否有这样的道路？当然它不会被关闭;它可以关闭吗？很容易？）

当然，我可以为棋子定义我自己的图形，但这会破坏使用Unicode字符的优势，因为它需要我的额外工作和更大的文件大小用户。我不想重复其他人的努力，设计好的字形，而我的最终应用程序可能涉及许多导入的字体等。

因此，找到一个强大的解决方案，从字体中获取字符和对该字符的适当支持，真的很不错。

这不仅适用于国际象棋，当然它也是一个很好的例子。

提前致谢，

汤姆

更新

这是一个适合国际象棋的软糖，几乎可以使用。它依赖于这样一个事实：在大多数带有棋子的字体中，黑色和白色部分的内部几乎是相互补充的。

＆＃13;

<?xml version="1.0" standalone="no"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="440" height="440" style="font-size: 34px;"><defs><style type="text/css">.large{fill:#700;}.small{fill:#eee;}</style></defs><rect x="0" y="0" width="440" height="440" fill="white"/><rect x="0" y="20" width="20" height="20" class="small"/><rect x="20" y="0" width="20" height="20" class="small"/><rect x="20" y="40" width="20" height="20" class="small"/><rect x="40" y="20" width="20" height="20" class="small"/><rect x="60" y="0" width="20" height="20" class="small"/><rect x="60" y="40" width="20" height="20" class="small"/><rect x="80" y="20" width="20" height="20" class="small"/><rect x="100" y="0" width="20" height="20" class="small"/><rect x="100" y="40" width="20" height="20" class="small"/><rect x="120" y="20" width="20" height="20" class="small"/><rect x="140" y="0" width="20" height="20" class="small"/><rect x="140" y="40" width="20" height="20" class="small"/><rect x="160" y="20" width="20" height="20" class="small"/><rect x="180" y="0" width="20" height="20" class="small"/><rect x="180" y="40" width="20" height="20" class="small"/><rect x="200" y="20" width="20" height="20" class="small"/><rect x="220" y="0" width="20" height="20" class="small"/><rect x="220" y="40" width="20" height="20" class="small"/><rect x="240" y="20" width="20" height="20" class="small"/><rect x="260" y="0" width="20" height="20" class="small"/><rect x="260" y="40" width="20" height="20" class="small"/><rect x="280" y="20" width="20" height="20" class="small"/><rect x="300" y="0" width="20" height="20" class="small"/><rect x="300" y="40" width="20" height="20" class="small"/><rect x="320" y="20" width="20" height="20" class="small"/><rect x="340" y="0" width="20" height="20" class="small"/><rect x="340" y="40" width="20" height="20" class="small"/><rect x="360" y="20" width="20" height="20" class="small"/><rect x="380" y="0" width="20" height="20" class="small"/><rect x="380" y="40" width="20" height="20" class="small"/><rect x="400" y="20" width="20" height="20" class="small"/><rect x="420" y="0" width="20" height="20" class="small"/><rect x="420" y="40" width="20" height="20" class="small"/><rect x="0" y="20" width="20" height="20" class="small"/><rect x="0" y="60" width="20" height="20" class="small"/><rect x="0" y="100" width="20" height="20" class="small"/><rect x="0" y="140" width="20" height="20" class="small"/><rect x="0" y="180" width="20" height="20" class="small"/><rect x="0" y="220" width="20" height="20" class="small"/><rect x="0" y="260" width="20" height="20" class="small"/><rect x="0" y="300" width="20" height="20" class="small"/><rect x="0" y="340" width="20" height="20" class="small"/><rect x="20" y="0" width="20" height="20" class="small"/><rect x="20" y="40" width="20" height="20" class="small"/><rect x="20" y="80" width="20" height="20" class="small"/><rect x="20" y="120" width="20" height="20" class="small"/><rect x="20" y="160" width="20" height="20" class="small"/><rect x="20" y="200" width="20" height="20" class="small"/><rect x="20" y="240" width="20" height="20" class="small"/><rect x="20" y="280" width="20" height="20" class="small"/><rect x="20" y="320" width="20" height="20" class="small"/><rect x="20" y="360" width="20" height="20" class="small"/><rect x="40" y="20" width="20" height="20" class="small"/><rect x="40" y="60" width="20" height="20" class="small"/><rect x="40" y="100" width="20" height="20" class="small"/><rect x="40" y="140" width="20" height="20" class="small"/><rect x="40" y="180" width="20" height="20" class="small"/><rect x="40" y="220" width="20" height="20" class="small"/><rect x="40" y="260" width="20" height="20" class="small"/><rect x="40" y="300" width="20" height="20" class="small"/><rect x="40" y="340" width="20" height="20" class="small"/><rect x="380" y="0" width="20" height="20" class="small"/><rect x="380" y="40" width="20" height="20" class="small"/><rect x="380" y="80" width="20" height="20" class="small"/><rect x="380" y="120" width="20" height="20" class="small"/><rect x="380" y="160" width="20" height="20" class="small"/><rect x="380" y="200" width="20" height="20" class="small"/><rect x="380" y="240" width="20" height="20" class="small"/><rect x="380" y="280" width="20" height="20" class="small"/><rect x="380" y="320" width="20" height="20" class="small"/><rect x="380" y="360" width="20" height="20" class="small"/><rect x="400" y="20" width="20" height="20" class="small"/><rect x="400" y="60" width="20" height="20" class="small"/><rect x="400" y="100" width="20" height="20" class="small"/><rect x="400" y="140" width="20" height="20" class="small"/><rect x="400" y="180" width="20" height="20" class="small"/><rect x="400" y="220" width="20" height="20" class="small"/><rect x="400" y="260" width="20" height="20" class="small"/><rect x="400" y="300" width="20" height="20" class="small"/><rect x="400" y="340" width="20" height="20" class="small"/><rect x="420" y="0" width="20" height="20" class="small"/><rect x="420" y="40" width="20" height="20" class="small"/><rect x="420" y="80" width="20" height="20" class="small"/><rect x="420" y="120" width="20" height="20" class="small"/><rect x="420" y="160" width="20" height="20" class="small"/><rect x="420" y="200" width="20" height="20" class="small"/><rect x="420" y="240" width="20" height="20" class="small"/><rect x="420" y="280" width="20" height="20" class="small"/><rect x="420" y="320" width="20" height="20" class="small"/><rect x="420" y="360" width="20" height="20" class="small"/><rect x="0" y="380" width="20" height="20" class="small"/><rect x="0" y="420" width="20" height="20" class="small"/><rect x="20" y="400" width="20" height="20" class="small"/><rect x="40" y="380" width="20" height="20" class="small"/><rect x="40" y="420" width="20" height="20" class="small"/><rect x="60" y="400" width="20" height="20" class="small"/><rect x="80" y="380" width="20" height="20" class="small"/><rect x="80" y="420" width="20" height="20" class="small"/><rect x="100" y="400" width="20" height="20" class="small"/><rect x="120" y="380" width="20" height="20" class="small"/><rect x="120" y="420" width="20" height="20" class="small"/><rect x="140" y="400" width="20" height="20" class="small"/><rect x="160" y="380" width="20" height="20" class="small"/><rect x="160" y="420" width="20" height="20" class="small"/><rect x="180" y="400" width="20" height="20" class="small"/><rect x="200" y="380" width="20" height="20" class="small"/><rect x="200" y="420" width="20" height="20" class="small"/><rect x="220" y="400" width="20" height="20" class="small"/><rect x="240" y="380" width="20" height="20" class="small"/><rect x="240" y="420" width="20" height="20" class="small"/><rect x="260" y="400" width="20" height="20" class="small"/><rect x="280" y="380" width="20" height="20" class="small"/><rect x="280" y="420" width="20" height="20" class="small"/><rect x="300" y="400" width="20" height="20" class="small"/><rect x="320" y="380" width="20" height="20" class="small"/><rect x="320" y="420" width="20" height="20" class="small"/><rect x="340" y="400" width="20" height="20" class="small"/><rect x="360" y="380" width="20" height="20" class="small"/><rect x="360" y="420" width="20" height="20" class="small"/><rect x="380" y="400" width="20" height="20" class="small"/><rect x="400" y="380" width="20" height="20" class="small"/><rect x="400" y="420" width="20" height="20" class="small"/><rect x="420" y="400" width="20" height="20" class="small"/><rect x="60" y="100" width="40" height="40" class="large"/><rect x="60" y="180" width="40" height="40" class="large"/><rect x="60" y="260" width="40" height="40" class="large"/><rect x="60" y="340" width="40" height="40" class="large"/><rect x="100" y="60" width="40" height="40" class="large"/><rect x="100" y="140" width="40" height="40" class="large"/><rect x="100" y="220" width="40" height="40" class="large"/><rect x="100" y="300" width="40" height="40" class="large"/><rect x="140" y="100" width="40" height="40" class="large"/><rect x="140" y="180" width="40" height="40" class="large"/><rect x="140" y="260" width="40" height="40" class="large"/><rect x="140" y="340" width="40" height="40" class="large"/><rect x="180" y="60" width="40" height="40" class="large"/><rect x="180" y="140" width="40" height="40" class="large"/><rect x="180" y="220" width="40" height="40" class="large"/><rect x="180" y="300" width="40" height="40" class="large"/><rect x="220" y="100" width="40" height="40" class="large"/><rect x="220" y="180" width="40" height="40" class="large"/><rect x="220" y="260" width="40" height="40" class="large"/><rect x="220" y="340" width="40" height="40" class="large"/><rect x="260" y="60" width="40" height="40" class="large"/><rect x="260" y="140" width="40" height="40" class="large"/><rect x="260" y="220" width="40" height="40" class="large"/><rect x="260" y="300" width="40" height="40" class="large"/><rect x="300" y="100" width="40" height="40" class="large"/><rect x="300" y="180" width="40" height="40" class="large"/><rect x="300" y="260" width="40" height="40" class="large"/><rect x="300" y="340" width="40" height="40" class="large"/><rect x="340" y="60" width="40" height="40" class="large"/><rect x="340" y="140" width="40" height="40" class="large"/><rect x="340" y="220" width="40" height="40" class="large"/><rect x="340" y="300" width="40" height="40" class="large"/><rect x="60" y="60" width="320" height="320" style="fill:none; stroke-width:1; stroke:#000;"/><text x="240" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♔</text><text x="200" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♕</text><text x="80" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♖</text><text x="360" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♖</text><text x="160" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♗</text><text x="280" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♗</text><text x="320" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♘</text><text x="120" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♘</text><text x="80" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="120" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="160" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="200" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="240" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="280" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="320" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="360" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="240" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♚</text><text x="200" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♛</text><text x="80" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♜</text><text x="360" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♜</text><text x="160" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♝</text><text x="280" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♝</text><text x="320" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♞</text><text x="120" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♞</text><text x="80" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="120" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="160" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="200" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="240" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="280" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="320" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="360" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="240" y="374" text-anchor="middle" fill="black">♔</text><text x="200" y="374" text-anchor="middle" fill="black">♕</text><text x="80" y="374" text-anchor="middle" fill="black">♖</text><text x="360" y="374" text-anchor="middle" fill="black">♖</text><text x="160" y="374" text-anchor="middle" fill="black">♗</text><text x="280" y="374" text-anchor="middle" fill="black">♗</text><text x="320" y="374" text-anchor="middle" fill="black">♘</text><text x="120" y="374" text-anchor="middle" fill="black">♘</text><text x="80" y="334" text-anchor="middle" fill="black">♙</text><text x="120" y="334" text-anchor="middle" fill="black">♙</text><text x="160" y="334" text-anchor="middle" fill="black">♙</text><text x="200" y="334" text-anchor="middle" fill="black">♙</text><text x="240" y="334" text-anchor="middle" fill="black">♙</text><text x="280" y="334" text-anchor="middle" fill="black">♙</text><text x="320" y="334" text-anchor="middle" fill="black">♙</text><text x="360" y="334" text-anchor="middle" fill="black">♙</text><text x="240" y="94" text-anchor="middle" fill="black">♚</text><text x="200" y="94" text-anchor="middle" fill="black">♛</text><text x="80" y="94" text-anchor="middle" fill="black">♜</text><text x="360" y="94" text-anchor="middle" fill="black">♜</text><text x="160" y="94" text-anchor="middle" fill="black">♝</text><text x="280" y="94" text-anchor="middle" fill="black">♝</text><text x="320" y="94" text-anchor="middle" fill="black">♞</text><text x="120" y="94" text-anchor="middle" fill="black">♞</text><text x="80" y="134" text-anchor="middle" fill="black">♟</text><text x="120" y="134" text-anchor="middle" fill="black">♟</text><text x="160" y="134" text-anchor="middle" fill="black">♟</text><text x="200" y="134" text-anchor="middle" fill="black">♟</text><text x="240" y="134" text-anchor="middle" fill="black">♟</text><text x="280" y="134" text-anchor="middle" fill="black">♟</text><text x="320" y="134" text-anchor="middle" fill="black">♟</text><text x="360" y="134" text-anchor="middle" fill="black">♟</text></svg>

＆＃13;

几乎就是说，但并不完全。我仍然可以通过这些碎片看到红色，而且只有在黑色方块上才能看到完美。

Answer 1

做你想做的事是非常困难/棘手的。也许你可以考虑一种更简单的方法？如何用白色勾勒出所有碎片，以便它们从背景中脱颖而出？

div {
  font-family: sans-serif;
  font-size: 80px;
  line-height: 80px;
  text-align: center;
  font-weight: bold;
  display: inline-block;
  width: 80px;
  height: 80px;
  position: relative;
}

div:before
{
  content: attr(title);
  position: absolute;
  left: 0;
  width: 80px;
  height: 80px;
  z-index: -1;
  text-shadow:
     0px -1px 0 white,
     1px -1px 0 white,
     1px  0px 0 white,
     1px  1px 0 white,
     0px  1px 0 white,
    -1px  1px 0 white,
    -1px  0px 0 white,
    -1px -1px 0 white;
}

div:nth-child(2):before
{
  background-color: #700;
}

<div title="K">K</div><div title="Q">Q</div>

Answer 2

正在进行中......

请期待这里的进化，尤其是图表和代码可以改善答案的地方。这项工作需要时间。

希望解决方案完成时只需要再编辑一次。

----------

有几种近乎解决方案。我的实现会优雅地降级，所以我使用多个，但我会尝试将组件分开，以便更多地帮助其他人;有些人可能只想要一个部分。

解决方案1（对我来说只是一个止损）

仅限矢量解决方案的妥协，光栅只后面

我不想依赖于此，但这是一个看起来很完美的绝佳止损。

这不是最终答案，因为很难预测不同显示设备光栅化的所有后果。我讨厌早期的栅格。我可以尝试一个屏幕和一个激光切割机。在没有提供太多关于我的应用程序的无关细节的情况下，向量几乎总是对我发现自己所做的事情感觉更正确。

朋友正在学习的其中一件事就是使用激光切割机，我将它与我的作品联系起来。我还没有调查它是如何进行栅格化的。

<强> ＆LT; EDITME 为了说明大致看起来像什么，但完全使用更接近我的第一语言的矢量图形。我将重用我之前发布的那个。它并不完美;你仍然会看到红色，因为我没有用完全白色的轮廓支撑它们;我支持黑色碎片（白色）的白色碎片（黑色）和黑色碎片（再次黑色的顶层）和白色碎片（底层再次为白色）。 这些几乎是补充 - 但并不完全 - 在大多数浏览器中，具体取决于您的字体。

<?xml version="1.0" standalone="no"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="440" height="440" style="font-size: 34px;"><defs><style type="text/css">.large{fill:#700;}.small{fill:#eee;}</style></defs><rect x="0" y="0" width="440" height="440" fill="white"/><rect x="0" y="20" width="20" height="20" class="small"/><rect x="20" y="0" width="20" height="20" class="small"/><rect x="20" y="40" width="20" height="20" class="small"/><rect x="40" y="20" width="20" height="20" class="small"/><rect x="60" y="0" width="20" height="20" class="small"/><rect x="60" y="40" width="20" height="20" class="small"/><rect x="80" y="20" width="20" height="20" class="small"/><rect x="100" y="0" width="20" height="20" class="small"/><rect x="100" y="40" width="20" height="20" class="small"/><rect x="120" y="20" width="20" height="20" class="small"/><rect x="140" y="0" width="20" height="20" class="small"/><rect x="140" y="40" width="20" height="20" class="small"/><rect x="160" y="20" width="20" height="20" class="small"/><rect x="180" y="0" width="20" height="20" class="small"/><rect x="180" y="40" width="20" height="20" class="small"/><rect x="200" y="20" width="20" height="20" class="small"/><rect x="220" y="0" width="20" height="20" class="small"/><rect x="220" y="40" width="20" height="20" class="small"/><rect x="240" y="20" width="20" height="20" class="small"/><rect x="260" y="0" width="20" height="20" class="small"/><rect x="260" y="40" width="20" height="20" class="small"/><rect x="280" y="20" width="20" height="20" class="small"/><rect x="300" y="0" width="20" height="20" class="small"/><rect x="300" y="40" width="20" height="20" class="small"/><rect x="320" y="20" width="20" height="20" class="small"/><rect x="340" y="0" width="20" height="20" class="small"/><rect x="340" y="40" width="20" height="20" class="small"/><rect x="360" y="20" width="20" height="20" class="small"/><rect x="380" y="0" width="20" height="20" class="small"/><rect x="380" y="40" width="20" height="20" class="small"/><rect x="400" y="20" width="20" height="20" class="small"/><rect x="420" y="0" width="20" height="20" class="small"/><rect x="420" y="40" width="20" height="20" class="small"/><rect x="0" y="20" width="20" height="20" class="small"/><rect x="0" y="60" width="20" height="20" class="small"/><rect x="0" y="100" width="20" height="20" class="small"/><rect x="0" y="140" width="20" height="20" class="small"/><rect x="0" y="180" width="20" height="20" class="small"/><rect x="0" y="220" width="20" height="20" class="small"/><rect x="0" y="260" width="20" height="20" class="small"/><rect x="0" y="300" width="20" height="20" class="small"/><rect x="0" y="340" width="20" height="20" class="small"/><rect x="20" y="0" width="20" height="20" class="small"/><rect x="20" y="40" width="20" height="20" class="small"/><rect x="20" y="80" width="20" height="20" class="small"/><rect x="20" y="120" width="20" height="20" class="small"/><rect x="20" y="160" width="20" height="20" class="small"/><rect x="20" y="200" width="20" height="20" class="small"/><rect x="20" y="240" width="20" height="20" class="small"/><rect x="20" y="280" width="20" height="20" class="small"/><rect x="20" y="320" width="20" height="20" class="small"/><rect x="20" y="360" width="20" height="20" class="small"/><rect x="40" y="20" width="20" height="20" class="small"/><rect x="40" y="60" width="20" height="20" class="small"/><rect x="40" y="100" width="20" height="20" class="small"/><rect x="40" y="140" width="20" height="20" class="small"/><rect x="40" y="180" width="20" height="20" class="small"/><rect x="40" y="220" width="20" height="20" class="small"/><rect x="40" y="260" width="20" height="20" class="small"/><rect x="40" y="300" width="20" height="20" class="small"/><rect x="40" y="340" width="20" height="20" class="small"/><rect x="380" y="0" width="20" height="20" class="small"/><rect x="380" y="40" width="20" height="20" class="small"/><rect x="380" y="80" width="20" height="20" class="small"/><rect x="380" y="120" width="20" height="20" class="small"/><rect x="380" y="160" width="20" height="20" class="small"/><rect x="380" y="200" width="20" height="20" class="small"/><rect x="380" y="240" width="20" height="20" class="small"/><rect x="380" y="280" width="20" height="20" class="small"/><rect x="380" y="320" width="20" height="20" class="small"/><rect x="380" y="360" width="20" height="20" class="small"/><rect x="400" y="20" width="20" height="20" class="small"/><rect x="400" y="60" width="20" height="20" class="small"/><rect x="400" y="100" width="20" height="20" class="small"/><rect x="400" y="140" width="20" height="20" class="small"/><rect x="400" y="180" width="20" height="20" class="small"/><rect x="400" y="220" width="20" height="20" class="small"/><rect x="400" y="260" width="20" height="20" class="small"/><rect x="400" y="300" width="20" height="20" class="small"/><rect x="400" y="340" width="20" height="20" class="small"/><rect x="420" y="0" width="20" height="20" class="small"/><rect x="420" y="40" width="20" height="20" class="small"/><rect x="420" y="80" width="20" height="20" class="small"/><rect x="420" y="120" width="20" height="20" class="small"/><rect x="420" y="160" width="20" height="20" class="small"/><rect x="420" y="200" width="20" height="20" class="small"/><rect x="420" y="240" width="20" height="20" class="small"/><rect x="420" y="280" width="20" height="20" class="small"/><rect x="420" y="320" width="20" height="20" class="small"/><rect x="420" y="360" width="20" height="20" class="small"/><rect x="0" y="380" width="20" height="20" class="small"/><rect x="0" y="420" width="20" height="20" class="small"/><rect x="20" y="400" width="20" height="20" class="small"/><rect x="40" y="380" width="20" height="20" class="small"/><rect x="40" y="420" width="20" height="20" class="small"/><rect x="60" y="400" width="20" height="20" class="small"/><rect x="80" y="380" width="20" height="20" class="small"/><rect x="80" y="420" width="20" height="20" class="small"/><rect x="100" y="400" width="20" height="20" class="small"/><rect x="120" y="380" width="20" height="20" class="small"/><rect x="120" y="420" width="20" height="20" class="small"/><rect x="140" y="400" width="20" height="20" class="small"/><rect x="160" y="380" width="20" height="20" class="small"/><rect x="160" y="420" width="20" height="20" class="small"/><rect x="180" y="400" width="20" height="20" class="small"/><rect x="200" y="380" width="20" height="20" class="small"/><rect x="200" y="420" width="20" height="20" class="small"/><rect x="220" y="400" width="20" height="20" class="small"/><rect x="240" y="380" width="20" height="20" class="small"/><rect x="240" y="420" width="20" height="20" class="small"/><rect x="260" y="400" width="20" height="20" class="small"/><rect x="280" y="380" width="20" height="20" class="small"/><rect x="280" y="420" width="20" height="20" class="small"/><rect x="300" y="400" width="20" height="20" class="small"/><rect x="320" y="380" width="20" height="20" class="small"/><rect x="320" y="420" width="20" height="20" class="small"/><rect x="340" y="400" width="20" height="20" class="small"/><rect x="360" y="380" width="20" height="20" class="small"/><rect x="360" y="420" width="20" height="20" class="small"/><rect x="380" y="400" width="20" height="20" class="small"/><rect x="400" y="380" width="20" height="20" class="small"/><rect x="400" y="420" width="20" height="20" class="small"/><rect x="420" y="400" width="20" height="20" class="small"/><rect x="60" y="100" width="40" height="40" class="large"/><rect x="60" y="180" width="40" height="40" class="large"/><rect x="60" y="260" width="40" height="40" class="large"/><rect x="60" y="340" width="40" height="40" class="large"/><rect x="100" y="60" width="40" height="40" class="large"/><rect x="100" y="140" width="40" height="40" class="large"/><rect x="100" y="220" width="40" height="40" class="large"/><rect x="100" y="300" width="40" height="40" class="large"/><rect x="140" y="100" width="40" height="40" class="large"/><rect x="140" y="180" width="40" height="40" class="large"/><rect x="140" y="260" width="40" height="40" class="large"/><rect x="140" y="340" width="40" height="40" class="large"/><rect x="180" y="60" width="40" height="40" class="large"/><rect x="180" y="140" width="40" height="40" class="large"/><rect x="180" y="220" width="40" height="40" class="large"/><rect x="180" y="300" width="40" height="40" class="large"/><rect x="220" y="100" width="40" height="40" class="large"/><rect x="220" y="180" width="40" height="40" class="large"/><rect x="220" y="260" width="40" height="40" class="large"/><rect x="220" y="340" width="40" height="40" class="large"/><rect x="260" y="60" width="40" height="40" class="large"/><rect x="260" y="140" width="40" height="40" class="large"/><rect x="260" y="220" width="40" height="40" class="large"/><rect x="260" y="300" width="40" height="40" class="large"/><rect x="300" y="100" width="40" height="40" class="large"/><rect x="300" y="180" width="40" height="40" class="large"/><rect x="300" y="260" width="40" height="40" class="large"/><rect x="300" y="340" width="40" height="40" class="large"/><rect x="340" y="60" width="40" height="40" class="large"/><rect x="340" y="140" width="40" height="40" class="large"/><rect x="340" y="220" width="40" height="40" class="large"/><rect x="340" y="300" width="40" height="40" class="large"/><rect x="60" y="60" width="320" height="320" style="fill:none; stroke-width:1; stroke:#000;"/><text x="240" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♔</text><text x="200" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♕</text><text x="80" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♖</text><text x="360" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♖</text><text x="160" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♗</text><text x="280" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♗</text><text x="320" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♘</text><text x="120" y="94" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♘</text><text x="80" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="120" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="160" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="200" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="240" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="280" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="320" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="360" y="134" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♙</text><text x="240" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♚</text><text x="200" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♛</text><text x="80" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♜</text><text x="360" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♜</text><text x="160" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♝</text><text x="280" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♝</text><text x="320" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♞</text><text x="120" y="374" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♞</text><text x="80" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="120" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="160" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="200" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="240" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="280" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="320" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="360" y="334" stroke-width="0.3" stroke="white" text-anchor="middle" fill="white">♟</text><text x="240" y="374" text-anchor="middle" fill="black">♔</text><text x="200" y="374" text-anchor="middle" fill="black">♕</text><text x="80" y="374" text-anchor="middle" fill="black">♖</text><text x="360" y="374" text-anchor="middle" fill="black">♖</text><text x="160" y="374" text-anchor="middle" fill="black">♗</text><text x="280" y="374" text-anchor="middle" fill="black">♗</text><text x="320" y="374" text-anchor="middle" fill="black">♘</text><text x="120" y="374" text-anchor="middle" fill="black">♘</text><text x="80" y="334" text-anchor="middle" fill="black">♙</text><text x="120" y="334" text-anchor="middle" fill="black">♙</text><text x="160" y="334" text-anchor="middle" fill="black">♙</text><text x="200" y="334" text-anchor="middle" fill="black">♙</text><text x="240" y="334" text-anchor="middle" fill="black">♙</text><text x="280" y="334" text-anchor="middle" fill="black">♙</text><text x="320" y="334" text-anchor="middle" fill="black">♙</text><text x="360" y="334" text-anchor="middle" fill="black">♙</text><text x="240" y="94" text-anchor="middle" fill="black">♚</text><text x="200" y="94" text-anchor="middle" fill="black">♛</text><text x="80" y="94" text-anchor="middle" fill="black">♜</text><text x="360" y="94" text-anchor="middle" fill="black">♜</text><text x="160" y="94" text-anchor="middle" fill="black">♝</text><text x="280" y="94" text-anchor="middle" fill="black">♝</text><text x="320" y="94" text-anchor="middle" fill="black">♞</text><text x="120" y="94" text-anchor="middle" fill="black">♞</text><text x="80" y="134" text-anchor="middle" fill="black">♟</text><text x="120" y="134" text-anchor="middle" fill="black">♟</text><text x="160" y="134" text-anchor="middle" fill="black">♟</text><text x="200" y="134" text-anchor="middle" fill="black">♟</text><text x="240" y="134" text-anchor="middle" fill="black">♟</text><text x="280" y="134" text-anchor="middle" fill="black">♟</text><text x="320" y="134" text-anchor="middle" fill="black">♟</text><text x="360" y="134" text-anchor="middle" fill="black">♟</text></svg>

EDITME ＆gt;

解决方案2：

<强> 2A。要求下载一个专门设计的SVG字体，使用填充和描边效果来清晰显示板位，以区分碎片

完成，我的新自制字体看起来不错，但还不如内置字体

这允许我保留Unicode字符，以便用户可以将国际象棋位置复制到文本编辑器和其他细节。

它会影响文件大小，但不会太多，特别是如果我设计一个我自己的字体 only 包含棋子。

它妥协，因为我实际上非常喜欢大多数内置字体中的象棋字符，我还想让用户选择所有字体，包括我的。

它在跨浏览器支持方面有所妥协;在我所有的浏览器中，只有Safari能够理解SVG字体，令人惊讶的是。但是他们激动我，我不会成为拖延问题的一部分，所以我将它们包含在我的实施中只是为了学习。

无论如何，这是从SVG到SVG字体的一小步。

<强> 2B。当以黑色字体颜色键入文本编辑器时，也可以使片段看起来清晰。（因此，Unicode 9812至9817为白色，而9818至9823为黑色。）

目前的延迟：抵消路径 - 这似乎是我每项工作的主题！ - 制作一个非常漂亮的自己的字体是必要的，而且我现在已经完成了这个有趣的数学难题。

这部分与我原来的问题不太相关，但对于人们在Stack Exchange上提出的其他问题非常有帮助;我将在他们自己的地方回答他们，但我仍然会在这里包含对路径抵消感兴趣的人的链接;受试者密切相关。

解决方案3：在不使用外部代码的情况下妥协

Opentype.js可能会或可能不会帮助我检查浏览器的内部字体，但我还不确定。这部分答案是我希望找到捷径的地方。我想要一个我没有创建或下载的字体的最外层路径; 希望它可以通过API以某种方式提供，而这个是我在上寻求帮助的部分。

我可以实现自己的，我想，而且现在我已经离这么做了。但是我仍然想要访问浏览器提供此类数据的能力，然后再回到我自己的代码中。

最简单的填空方式＃39;字体的一部分，使用CSS或SVG