- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我最初没能说清楚。 (我在标题中加入了“使用 CSS 和 SVG”,但几乎没有再提到它。)
另外:我是一名资深的图形程序员,负责制作 SVG 和 Javascript。我主要是一名数学家;偏移路径和交叉极其复杂的事物对我来说是一种乐趣。我想提早一点可能会有用;我们生活,我们学习...
这是一个很好的例子,说明了我所说的字体的“空白”部分:
这些片段是 Unicode 字符——因此它们可以从 SVG 复制到文本编辑器——正如您所见,方形颜色会影响它们的外观。改变“填充”肯定是错误的;整个字符都改变了颜色,并且仍然在下面的方 block 颜色上留下相同的空白窗口。
如果我能达到用 Angular 色的纯白色轮廓作为背景的效果,它们当然会更好看。如果我有每一个的最外层轮廓,作为一条封闭的路径,那将变得容易。 (但这可能吗?甚至有这样的路径吗?它肯定不会被关闭;它可以关闭吗?容易吗?)
当然,我可以为棋子定义我自己的图形,但这会破坏使用 Unicode 字符的优势,因为它需要我额外的工作和更大的文件大小用户。我不想重复别人的努力,设计漂亮的字形,我最终的应用程序可能涉及许多导入字体等。
因此,如果能找到一个可靠的解决方案,既能从字体中获取字符,又能为该字符提供适当的背景,那就太好了。
这不仅适用于国际象棋,尽管它当然是一个很好的例子。
提前致谢
汤姆
更新
这是一个软糖,只适合国际象棋,几乎可以工作。它依赖于这样一个事实,即在大多数带有棋子的字体中,黑白棋子的内部几乎是互补的。
<?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>
几乎,也就是说,但不完全是。我个人仍然可以透过这些碎片看到红色,而且它们只有在黑色方 block 上看起来才完美。
最佳答案
做你想做的事非常困难/棘手。也许您可以考虑一种更简单的方法?用白色勾勒出所有部分,使它们从背景中脱颖而出怎么样?
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>
关于javascript - 使用 CSS 或 SVG 填充字体的 'empty' 部分的最简单方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43624820/
你知道更好的写法吗 font = font ? font : defaultFont; 我所知道的是: if(!font) { font = defaultFont } 我知道这是一个小工具问
我正在编写代码,但无法编译,即使类(字体)已通过 import javafx.scene.text.*; 导入我知道这个方法font包含在字体中。 这是我的代码: package helloworld
我已经构建了一个按钮,但在格式设置(即平方、内联文本等)方面遇到了问题 我目前的问题是:正文分为2部分- 上线正常-下一行是较大的字体大小 我的动画 react 正确,但文本应该在箭头的顶线和底线内。
好的,所以我想在网页上使用固定系统作为字体。我可以使用 Cufon,但我希望人们能够在鼠标悬停时选择文本并复制它。 有人有什么吗? 最佳答案 我使用 fontsquirrel 的 @font-face
我找到了 iOS 4.2 可用字体列表(链接 here ),但该列表与早期版本的 SDK 略有不同(链接 here )。 我可以很好地更改代码中的字体,但如果我使用 iOS 4.2 列表中可用的字体,
我正在尝试更改 TableView 标题上的字体颜色,其中显示“加利福尼亚/纽约”。我该怎么做? 在黑色背景上,文本需要是白色的,但无法弄清楚这一点。 谢谢 最佳答案 如果您尝试更改标题颜色,可以使用
假设我想使用 java.awt.Graphics.drawString(String str, int x, int y)在某些特定坐标处绘制字符串的方法,例如 (300, 300)。然而drawSt
我想使用Puppeteer从HTML字符串生成图像。现在我有这样的事情: const html = _.template(` Hello {{ test }}!
我正在创建一个游戏。我有一些带有文本的用户界面。最近我们想添加日语版本,但我遇到字体问题。我使用 stb_freetype 来光栅化字体,并且我支持 Unicode,所以这应该不是问题。但大多数字体似
我可以在一个文本区域中使用不同的前景色吗?不同的字体? 我想添加类似“hh:mm:ss 昵称:消息”的内容,时间为灰色,名称 - 蓝色,消息 - 黑色。 最佳答案 我在评论中犯了一个错误:你想要的是
每次我更改字体时,它都会返回到默认大小,即 12,即使我之前使用“ Jade 野”菜单更改它,它每次也只会返回到 12,我的猜测是这样我使用deriveFont()更改大小,但现在没有其他方法可以更改
我的电脑上安装了一种名为“BMW1”的自定义字体。我试图循环遍历此字体中的所有条目并将它们显示在 JTextArea 中。 我有以下代码: JTextArea displayArea = new JT
我尝试通过 Squirrel 理解生成的代码,这里是输出: @font-face { font-family: 'someFont'; src: url('someFont.eot')
我知道有多种方法可以通过 JS/DHTML 动态更改网页的字体属性,或者用 Flash 呈现的字体(使用 sIFR 或 Cufon)替换文本。但是,我找不到任何根据用户选择动态更改网页上使用的字体的好
使用具有非标准样式名称(例如“Inline”或“Outline”)而不是标准样式(例如“Bold”和“Italic”)的字体系列,如何使用 css 选择字体的不同样式? 设置 font-family
我对 html/css 有点陌生,我正在制作我的第一个网站,但我只是想不通一些东西。 首先,我在 dreaweaver 中工作...在 dreaweaver 中,一切看起来都不错,但是当我预览时,我缺
有没有办法在 Allegro5 中只绘制(或显示)图像/字体的一部分? 例如,如果我有一个正方形 A 和一个图像 B,我只想绘制/显示 B 中与 A(在本例中为 C)重叠的部分,我该怎么做? 插图:
所以,我有一个正在生成的报告 html 文件,其中有需要白色文本/字体的黑框。在通用 html 显示中一切都很好,但是当我尝试打印页面时,ctrl + p 或自定义打印功能,文本/字体保持为标准颜色,
我正在尝试制作一个非常适合 LaTeX 文档的 matlab 图形。一个已知的问题是 XTickLabel 和 YTickLabels 不使用 LaTeX 解释器渲染,导致图形不好看。 (注意:我意识
我需要在一个公共(public)位置使用默认颜色和字体,以便在桌面应用程序的多个窗口窗体中使用它。 这方面的最佳做法是什么? 我正在考虑使用应用程序设置在那里定义它们,但我想确保这是推荐的方法或者是否
我是一名优秀的程序员,十分优秀!