当我们不能使用字形字体时，我如何用列表的字体大小制作一个列表样式的图像比例？

Question

我正在开发的一个网页在列表中使用了一些花哨的V形符号作为要点。我想定义一个列表样式，它可以根据列表项本身的字体大小进行缩放：这样做是我问题的最终目标。

我们目前将这些符号保存在SVG文件中（下面提供了其中之一），因此它们可以被放大而不会看起来很糟糕。它们是这样引用的：

ul.foo {
    list-style-image: url("../images/chevron.svg");
}

我们在现场使用这些人字形列表几次。有时是大文本，有时是较小或正常大小的文本。我们被迫为每个字体大小创建一个新的chevron图像(例如< code>chevron-small.svg，< code>chevron-medium.svg，< code>chevron-large.svg，等等)，但肯定有更好的方法让我们只使用一个图像，并根据字体大小放大和缩小它！

但是，我还没想好怎么让图片随字体大小缩放。

列表样式图像的W3 wiki建议“如果图像的内在宽度或高度以百分比形式给出，那么该百分比将根据1em进行解析”，这听起来正是我们想要的。不过，我还没有弄清楚如何实现这一点。Brian Campbell对如何使用其父容器制作svg比例？的回答似乎提出了一种使百分比发生的方法，但是当我将宽度或高度设置为100%时，即使字体大小很大，雪佛龙项目符号点也会显示得非常小或根本不显示。

我怎样才能使这个列表样式的图像和文本大小完全一致，这样当UL的文本变大时，项目符号图像也会变大？

(字形字体:我们不能用。它们可以在视觉上完成工作，但是它们对可访问性有不好的影响，因为屏幕阅读器不会把项目符号读成项目符号，而是读成其他奇怪的字符。我们可以定义一个自定义的字形字体，并用我们的字体替换其中的项目符号，但是这样做的文件大小开销会很大。据我所知，我们需要使用图像。)

SVG来自Illustrator，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="8px" height="14px" viewBox="0 0 8 14" enable-background="new 0 0 8 14" xml:space="preserve">
<path fill="#666666" d="M0.37,12.638l5.726-5.565L0.531,1.347C0.252,1.059,0.261,0.601,0.547,0.321
    c0.289-0.279,0.746-0.272,1.026,0.016l6.062,6.24c0,0.002,0.006,0.004,0.008,0.006c0.068,0.07,0.119,0.156,0.156,0.244
    C7.902,7.088,7.846,7.399,7.631,7.61c-0.002,0.004-0.006,0.004-0.01,0.006l-6.238,6.063c-0.143,0.141-0.331,0.209-0.514,0.205
    c-0.187-0.006-0.372-0.078-0.511-0.221C0.076,13.376,0.083,12.919,0.37,12.638"/>
</svg>

如下所示，其中文本为 16px，V 形没有缩放到字体大小，但相当大且可见（在这种情况下比所需的大一点，但让我们忽略它，因为图像本身可以编辑）：

如前所述，我试图遵循Brian Campbell的答案，将width或height属性设置为100%:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100%" viewBox="0 0 8 14" enable-background="new 0 0 8 14" xml:space="preserve">

然而，将宽度或高度定义为100%似乎会使人字形变得很小，比1em小得多，如前所述:

（来自Firefox的截图。在Chrome中，它们有点大，但仍远小于16px。）

/* 
The image referenced here is the SVG provided above, with base 64 encoding. It is the
freshly exported version that still has a defined width and height of 8px and 14px.
You may wish to just save the SVG above locally.
*/

ul {
  list-style-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI4cHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDggMTQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDggMTQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM2NjY2NjYiIGQ9Ik0wLjM3LDEyLjYzOGw1LjcyNi01LjU2NUwwLjUzMSwxLjM0N0MwLjI1MiwxLjA1OSwwLjI2MSwwLjYwMSwwLjU0NywwLjMyMWMwLjI4OS0wLjI3OSwwLjc0Ni0wLjI3MiwxLjAyNiwwLjAxNmw2LjA2Miw2LjI0YzAsMC4wMDIsMC4wMDYsMC4wMDQsMC4wMDgsMC4wMDZjMC4wNjgsMC4wNywwLjExOSwwLjE1NiwwLjE1NiwwLjI0NEM3LjkwMiw3LjA4OCw3Ljg0Niw3LjM5OSw3LjYzMSw3LjYxYy0wLjAwMiwwLjAwNC0wLjAwNiwwLjAwNC0wLjAxLDAuMDA2bC02LjIzOCw2LjA2M2MtMC4xNDMsMC4xNDEtMC4zMzEsMC4yMDktMC41MTQsMC4yMDVjLTAuMTg3LTAuMDA2LTAuMzcyLTAuMDc4LTAuNTExLTAuMjIxQzAuMDc2LDEzLjM3NiwwLjA4MywxMi45MTksMC4zNywxMi42MzgiLz48L3N2Zz4=');
  /* Or if you wish to save the SVG locally:
  list-style-image: url('chevron.svg');
  */
}

.small-list {
   font-size: 85%;
}

.large-list {
  font-size: 150%;
}

<ul class="small-list">
  <li>The goal is to make the chevron smaller for this list</li>
  <li>Specifically, just slightly smaller than capital letters, as stated.</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>

<ul class="large-list">
  <li>And larger for this list</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>

Answer 1

您可以直接在css中定义svg并根据需要更改高度和宽度，不是很干燥，但它有效：

.small-list {
  font-size: 85%;
  list-style-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 14" width="6" height="9"><path fill="%23666666" d="M0.37,12.638l5.726-5.565L0.531,1.347C0.252,1.059,0.261,0.601,0.547,0.321 c0.289-0.279,0.746-0.272,1.026,0.016l6.062,6.24c0,0.002,0.006,0.004,0.008,0.006c0.068,0.07,0.119,0.156,0.156,0.244 C7.902,7.088,7.846,7.399,7.631,7.61c-0.002,0.004-0.006,0.004-0.01,0.006l-6.238,6.063c-0.143,0.141-0.331,0.209-0.514,0.205 c-0.187-0.006-0.372-0.078-0.511-0.221C0.076,13.376,0.083,12.919,0.37,12.638" /></svg>');
}
.large-list {
  font-size: 150%;
  list-style-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 14" width="8" height="14"><path fill="%23666666" d="M0.37,12.638l5.726-5.565L0.531,1.347C0.252,1.059,0.261,0.601,0.547,0.321 c0.289-0.279,0.746-0.272,1.026,0.016l6.062,6.24c0,0.002,0.006,0.004,0.008,0.006c0.068,0.07,0.119,0.156,0.156,0.244 C7.902,7.088,7.846,7.399,7.631,7.61c-0.002,0.004-0.006,0.004-0.01,0.006l-6.238,6.063c-0.143,0.141-0.331,0.209-0.514,0.205 c-0.187-0.006-0.372-0.078-0.511-0.221C0.076,13.376,0.083,12.919,0.37,12.638" /></svg>');
}

<ul class="small-list">
  <li>The goal is to make the chevron smaller for this list</li>
  <li>Specifically, just slightly smaller than capital letters, as stated.</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>

<ul class="large-list">
  <li>And larger for this list</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>

Answer 2

在您的SVG映像XML中，您必须删除宽度和高度属性，然后SVG将缩放为ftt-size的100%或1em

下面是完成此操作后的图像的base64版本：

list-style-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA4IDE0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDE0IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjNjY2NjY2IiBkPSJNMC4zNywxMi42MzhsNS43MjYtNS41NjVMMC41MzEsMS4zNDdDMC4yNTIsMS4wNTksMC4yNjEsMC42MDEsMC41NDcsMC4zMjFjMC4yODktMC4yNzksMC43NDYtMC4yNzIsMS4wMjYsMC4wMTZsNi4wNjIsNi4yNGMwLDAuMDAyLDAuMDA2LDAuMDA0LDAuMDA4LDAuMDA2YzAuMDY4LDAuMDcsMC4xMTksMC4xNTYsMC4xNTYsMC4yNDRDNy45MDIsNy4wODgsNy44NDYsNy4zOTksNy42MzEsNy42MWMtMC4wMDIsMC4wMDQtMC4wMDYsMC4wMDQtMC4wMSwwLjAwNmwtNi4yMzgsNi4wNjNjLTAuMTQzLDAuMTQxLTAuMzMxLDAuMjA5LTAuNTE0LDAuMjA1Yy0wLjE4Ny0wLjAwNi0wLjM3Mi0wLjA3OC0wLjUxMS0wLjIyMUMwLjA3NiwxMy4zNzYsMC4wODMsMTIuOTE5LDAuMzcsMTIuNjM4Ii8+PC9zdmc+');

不幸的是，您无法明确设置列表样式图像的大小，但是有一个不需要任何进一步 HTML 的黑客解决方案;

如果您的LI元素只包含一行文本（列表通常是这种情况），那么您可以使用css选择器::first-line来放大或缩小字体大小，而不会影响列表样式图像。

给出这个替代解决方案：

ul {
  list-style-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA4IDE0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDE0IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjNjY2NjY2IiBkPSJNMC4zNywxMi42MzhsNS43MjYtNS41NjVMMC41MzEsMS4zNDdDMC4yNTIsMS4wNTksMC4yNjEsMC42MDEsMC41NDcsMC4zMjFjMC4yODktMC4yNzksMC43NDYtMC4yNzIsMS4wMjYsMC4wMTZsNi4wNjIsNi4yNGMwLDAuMDAyLDAuMDA2LDAuMDA0LDAuMDA4LDAuMDA2YzAuMDY4LDAuMDcsMC4xMTksMC4xNTYsMC4xNTYsMC4yNDRDNy45MDIsNy4wODgsNy44NDYsNy4zOTksNy42MzEsNy42MWMtMC4wMDIsMC4wMDQtMC4wMDYsMC4wMDQtMC4wMSwwLjAwNmwtNi4yMzgsNi4wNjNjLTAuMTQzLDAuMTQxLTAuMzMxLDAuMjA5LTAuNTE0LDAuMjA1Yy0wLjE4Ny0wLjAwNi0wLjM3Mi0wLjA3OC0wLjUxMS0wLjIyMUMwLjA3NiwxMy4zNzYsMC4wODMsMTIuOTE5LDAuMzcsMTIuNjM4Ii8+PC9zdmc+');
}

.small-list {
  font-size: 140%;
}
.large-list {
  font-size: 350%;
}

.small-list li::first-line,
.large-list li::first-line{
 font-size: 70%;
}

Answer 3

我会在每个< code>li前使用一个伪元素来解决这个问题

这里是标记

ul {
    list-style: none;
}

li {
    position: relative;
}

li:before {
    /*
    The desired width gets defined in two places: The element width, and background size.
    The height only gets defined once, in background size.
    */
    position: absolute;
    display: block;
    content: '\2022'; /* bullet point, for screen readers */
    text-indent: -999999px; /* move the bullet point out of sight */
    left: -.75em;
    width: .4em; /* desired width of the image */
    height: 1em; /* unrelated to image height; this is so it gets snipped */
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI4cHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDggMTQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDggMTQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM2NjY2NjYiIGQ9Ik0wLjM3LDEyLjYzOGw1LjcyNi01LjU2NUwwLjUzMSwxLjM0N0MwLjI1MiwxLjA1OSwwLjI2MSwwLjYwMSwwLjU0NywwLjMyMWMwLjI4OS0wLjI3OSwwLjc0Ni0wLjI3MiwxLjAyNiwwLjAxNmw2LjA2Miw2LjI0YzAsMC4wMDIsMC4wMDYsMC4wMDQsMC4wMDgsMC4wMDZjMC4wNjgsMC4wNywwLjExOSwwLjE1NiwwLjE1NiwwLjI0NEM3LjkwMiw3LjA4OCw3Ljg0Niw3LjM5OSw3LjYzMSw3LjYxYy0wLjAwMiwwLjAwNC0wLjAwNiwwLjAwNC0wLjAxLDAuMDA2bC02LjIzOCw2LjA2M2MtMC4xNDMsMC4xNDEtMC4zMzEsMC4yMDktMC41MTQsMC4yMDVjLTAuMTg3LTAuMDA2LTAuMzcyLTAuMDc4LTAuNTExLTAuMjIxQzAuMDc2LDEzLjM3NiwwLjA4MywxMi45MTksMC4zNywxMi42MzgiLz48L3N2Zz4=');
    background-size: .4em .7em;
    background-position: 0 .3em;
}

.small-list {
    font-size: 85%;
}

.large-list {
    font-size: 150%;
}

<ul class="small-list">
  <li>The goal is to make the chevron smaller for this list</li>
  <li>Specifically, just slightly smaller than capital letters, as stated.</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>
    
<ul class="large-list">
  <li>And larger for this list</li>
  <li>Multiline list item<br>for testing</li>
  <li>Nomas matas</li>
  <li>Roris dedit</li>
</ul>