当我们不能使用字形字体时，如何使用列表的字体大小制作列表样式图像比例？
How can I make a list-style-image scale with the list's font size, when we can't use glyph fonts?
我正在处理的一个网页在列表中使用了一些花哨的 V 形符号作为要点。我想定义一个列表样式，它随列表项本身的字体大小缩放：这样做是我这里问题的最终目标。
我们目前将这些人字形保存在 SVG 文件中（下面提供了其中之一），这样它们就可以被放大而不至于看起来很糟糕。它们是这样引用的：
ul.foo {
list-style-image: url("../images/chevron.svg");
}
我们在网站周围多次使用这些 V 形列表。有时它们带有大文本，有时带有较小或正常大小的文本。我们被迫为每种字体大小（例如 chevron-small.svg、chevron-medium.svg、chevron-large.svg 等）创建一个新的人字形图像，但肯定有更好的方法让我们只使用一个图片并根据字体大小自行放大和缩小！
但是，我还没有想出如何使图像随字体大小缩放。
The W3 wiki for list-style-image suggests that "if the image's intrinsic width or height is given as a percentage, then that percentage is resolved against 1em", which sounds like it's exactly what we want. I haven't worked out how to make this happen though. Brian Campbell's answer to How can I make an svg scale with its parent container? 似乎提出了一种实现此百分比的方法，但是当我将宽度或高度设置为 100% 时，V 形圆点显示得非常小或根本不显示，即使字体太大了。
如何使这个列表样式图像完全随文本大小缩放，以便随着 UL 的文本大小变大，项目符号图像也会变大？
(Glyph 字体： 我们不能使用它们。它们可以在视觉上完成工作，但它们对可访问性有不好的影响，因为屏幕阅读器不会阅读将项目符号作为项目符号，但作为其他一些奇怪的字符。我们可以定义一个自定义字形字体，可能，并将其中的项目符号字符替换为我们的，但这样做的文件大小开销会过大。据我所知, 我们需要使用图像。)
我的 SVG 代码
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>
显示如下，其中文本为 16 像素，V 形没有缩放到字体大小，但相当大且可见（在这种情况下比期望的大一点，但让我们忽略它，因为图像本身可以编辑):
正如我所说，我尝试按照 Brian Campbell's answer 并将宽度或高度 属性 设置为 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>
您可以使用 SVG 作为嵌入图像：
<img src="chevron.svg" alt="chevron-icon" class="my-icon" />
*CSS
.my-icon{
width:50px;
height:auto;
}
一篇有用的文章：
http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php
为了更好的浏览器兼容性，我建议将您的 SVG 文件转换为字体，您可以在这里进行：
或者使用像 FontAwesome 这样的预先设计的字体：
在这里你会得到你需要的图标：
http://fontawesome.io/icon/chevron-right/
通过以下方式实现 FontAwesome：
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
但我强烈建议您下载源文件，而不是在中间文件中使用 man。
并添加此 CSS:
ul{
list-style:none;
color:#888;
font-size:24px;
}
ul li:before{
font-family: FontAwesome;
content:"\f054";
}
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
您可以在这里预览：
http://jsfiddle.net/a1vkeg6c/1/
通过这种方式，您将获得所需的 SVG 视网膜支持，甚至是更实用的方式。
希望对您有所帮助！
在您的 SVG 图片 XML 中，您必须删除 width 和 height 属性，然后 SVG 将缩放为 font-size 的 100% 或 1em
这是完成此操作后图像的 base64 版本：
list-style-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA4IDE0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDE0IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjNjY2NjY2IiBkPSJNMC4zNywxMi42MzhsNS43MjYtNS41NjVMMC41MzEsMS4zNDdDMC4yNTIsMS4wNTksMC4yNjEsMC42MDEsMC41NDcsMC4zMjFjMC4yODktMC4yNzksMC43NDYtMC4yNzIsMS4wMjYsMC4wMTZsNi4wNjIsNi4yNGMwLDAuMDAyLDAuMDA2LDAuMDA0LDAuMDA4LDAuMDA2YzAuMDY4LDAuMDcsMC4xMTksMC4xNTYsMC4xNTYsMC4yNDRDNy45MDIsNy4wODgsNy44NDYsNy4zOTksNy42MzEsNy42MWMtMC4wMDIsMC4wMDQtMC4wMDYsMC4wMDQtMC4wMSwwLjAwNmwtNi4yMzgsNi4wNjNjLTAuMTQzLDAuMTQxLTAuMzMxLDAuMjA5LTAuNTE0LDAuMjA1Yy0wLjE4Ny0wLjAwNi0wLjM3Mi0wLjA3OC0wLjUxMS0wLjIyMUMwLjA3NiwxMy4zNzYsMC4wODMsMTIuOTE5LDAuMzcsMTIuNjM4Ii8+PC9zdmc+');
遗憾的是，您无法显式设置 list-style-image 的大小，但是有一种 hack 解决方案不需要进一步 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%;
}
我会在每个 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: '22'; /* 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>
解释：
- 首先我们去掉
ul 上的默认项目符号
- 然后我们使用
:before 选择器和 content: '22'; 在每个 li 前面创建一个伪元素
-
content: '22'; 添加 unicode bullet point, •, 供屏幕阅读器读出。文本缩进使其远离视线。
- 然后我们将背景（人字形）应用到伪元素，并使用一些属性调整它的大小。这里的关键部分是确保尺寸与 svg 保持相同的比例。伪元素上的尺寸是使用
em 定义的，因此当 font-size 更改时它们会按比例调整。最后，我们还将背景定位在子弹所在的位置。
background-size: .4em .7em; 告诉浏览器按照图像的大小调整背景大小，我们需要在这里保持正确的纵横比。background-position: 0 .3em; 将人字形图像移动到与文本一致的位置。width: .4em; 使伪元素的宽度刚好适合图像，height: 1em; 使其匹配行高，并且足够高以适合偏移量。
警告：
- IE 8 不支持 background-size，但我认为这不会成为问题，因为它也不支持渲染 svg。
您可以直接在 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>
或者您可以将 svg 用作背景图像而不是列表样式图像，使它变干一点。请注意，此处不需要将 svg 放在 css 中：
ul {
list-style: none;
padding-left: 0;
}
li {
padding-left: .65em;
background: 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"><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>')no-repeat scroll 0% 50% /.65em .65em transparent;
}
.small-list li {
font-size: 85%;
}
.large-list li {
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>
这使用您的 svg 作为 ::before 内容的背景图像，使用 em 调整大小以使其与字体大小保持相同。无论您如何调整文本大小或放大或缩小，图像都只会小于与文本相同的大小。
ul.foo,
ul.foo li {
list-style-type: none;
padding: 0;
margin: 0;
}
ul.foo li {
height: 1em;
}
ul.foo li:before {
content: "";
background-image: url(http://imgh.us/chevron_1.svg);
background-size: .5em .5em;
background-repeat: no-repeat;
display: inline-block;
vertical-align: top;
position: relative;
top: 50%;
margin-top: -.175em;
width: .5em;
height: .5em;
}
<ul class="foo">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<ul class="foo" style="font-size: 2em">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
我正在处理的一个网页在列表中使用了一些花哨的 V 形符号作为要点。我想定义一个列表样式，它随列表项本身的字体大小缩放：这样做是我这里问题的最终目标。
我们目前将这些人字形保存在 SVG 文件中（下面提供了其中之一），这样它们就可以被放大而不至于看起来很糟糕。它们是这样引用的：
ul.foo {
list-style-image: url("../images/chevron.svg");
}
我们在网站周围多次使用这些 V 形列表。有时它们带有大文本，有时带有较小或正常大小的文本。我们被迫为每种字体大小（例如 chevron-small.svg、chevron-medium.svg、chevron-large.svg 等）创建一个新的人字形图像，但肯定有更好的方法让我们只使用一个图片并根据字体大小自行放大和缩小！
但是，我还没有想出如何使图像随字体大小缩放。
The W3 wiki for list-style-image suggests that "if the image's intrinsic width or height is given as a percentage, then that percentage is resolved against 1em", which sounds like it's exactly what we want. I haven't worked out how to make this happen though. Brian Campbell's answer to How can I make an svg scale with its parent container? 似乎提出了一种实现此百分比的方法，但是当我将宽度或高度设置为 100% 时，V 形圆点显示得非常小或根本不显示，即使字体太大了。
如何使这个列表样式图像完全随文本大小缩放，以便随着 UL 的文本大小变大，项目符号图像也会变大？
(Glyph 字体： 我们不能使用它们。它们可以在视觉上完成工作，但它们对可访问性有不好的影响，因为屏幕阅读器不会阅读将项目符号作为项目符号，但作为其他一些奇怪的字符。我们可以定义一个自定义字形字体，可能，并将其中的项目符号字符替换为我们的，但这样做的文件大小开销会过大。据我所知, 我们需要使用图像。)
我的 SVG 代码
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>
显示如下，其中文本为 16 像素，V 形没有缩放到字体大小，但相当大且可见（在这种情况下比期望的大一点，但让我们忽略它，因为图像本身可以编辑):
正如我所说，我尝试按照 Brian Campbell's answer 并将宽度或高度 属性 设置为 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>
您可以使用 SVG 作为嵌入图像：
<img src="chevron.svg" alt="chevron-icon" class="my-icon" />
*CSS
.my-icon{
width:50px;
height:auto;
}
一篇有用的文章：
http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php
为了更好的浏览器兼容性，我建议将您的 SVG 文件转换为字体，您可以在这里进行：
或者使用像 FontAwesome 这样的预先设计的字体：
在这里你会得到你需要的图标：
http://fontawesome.io/icon/chevron-right/
通过以下方式实现 FontAwesome：
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
但我强烈建议您下载源文件，而不是在中间文件中使用 man。
并添加此 CSS:
ul{
list-style:none;
color:#888;
font-size:24px;
}
ul li:before{
font-family: FontAwesome;
content:"\f054";
}
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
您可以在这里预览：
http://jsfiddle.net/a1vkeg6c/1/
通过这种方式，您将获得所需的 SVG 视网膜支持，甚至是更实用的方式。
希望对您有所帮助！
在您的 SVG 图片 XML 中，您必须删除 width 和 height 属性，然后 SVG 将缩放为 font-size 的 100% 或 1em
这是完成此操作后图像的 base64 版本：
list-style-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA4IDE0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDE0IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjNjY2NjY2IiBkPSJNMC4zNywxMi42MzhsNS43MjYtNS41NjVMMC41MzEsMS4zNDdDMC4yNTIsMS4wNTksMC4yNjEsMC42MDEsMC41NDcsMC4zMjFjMC4yODktMC4yNzksMC43NDYtMC4yNzIsMS4wMjYsMC4wMTZsNi4wNjIsNi4yNGMwLDAuMDAyLDAuMDA2LDAuMDA0LDAuMDA4LDAuMDA2YzAuMDY4LDAuMDcsMC4xMTksMC4xNTYsMC4xNTYsMC4yNDRDNy45MDIsNy4wODgsNy44NDYsNy4zOTksNy42MzEsNy42MWMtMC4wMDIsMC4wMDQtMC4wMDYsMC4wMDQtMC4wMSwwLjAwNmwtNi4yMzgsNi4wNjNjLTAuMTQzLDAuMTQxLTAuMzMxLDAuMjA5LTAuNTE0LDAuMjA1Yy0wLjE4Ny0wLjAwNi0wLjM3Mi0wLjA3OC0wLjUxMS0wLjIyMUMwLjA3NiwxMy4zNzYsMC4wODMsMTIuOTE5LDAuMzcsMTIuNjM4Ii8+PC9zdmc+');
遗憾的是，您无法显式设置 list-style-image 的大小，但是有一种 hack 解决方案不需要进一步 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%;
}
我会在每个 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: '22'; /* 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>
解释：
- 首先我们去掉
ul 上的默认项目符号
- 然后我们使用
:before选择器和content: '22';在每个li前面创建一个伪元素-
content: '22';添加 unicode bullet point, •, 供屏幕阅读器读出。文本缩进使其远离视线。
-
- 然后我们将背景（人字形）应用到伪元素，并使用一些属性调整它的大小。这里的关键部分是确保尺寸与 svg 保持相同的比例。伪元素上的尺寸是使用
em定义的，因此当font-size更改时它们会按比例调整。最后，我们还将背景定位在子弹所在的位置。background-size: .4em .7em;告诉浏览器按照图像的大小调整背景大小，我们需要在这里保持正确的纵横比。background-position: 0 .3em;将人字形图像移动到与文本一致的位置。width: .4em;使伪元素的宽度刚好适合图像，height: 1em;使其匹配行高，并且足够高以适合偏移量。
警告：
- IE 8 不支持 background-size，但我认为这不会成为问题，因为它也不支持渲染 svg。
您可以直接在 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>
或者您可以将 svg 用作背景图像而不是列表样式图像，使它变干一点。请注意，此处不需要将 svg 放在 css 中：
ul {
list-style: none;
padding-left: 0;
}
li {
padding-left: .65em;
background: 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"><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>')no-repeat scroll 0% 50% /.65em .65em transparent;
}
.small-list li {
font-size: 85%;
}
.large-list li {
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>
这使用您的 svg 作为 ::before 内容的背景图像，使用 em 调整大小以使其与字体大小保持相同。无论您如何调整文本大小或放大或缩小，图像都只会小于与文本相同的大小。
ul.foo,
ul.foo li {
list-style-type: none;
padding: 0;
margin: 0;
}
ul.foo li {
height: 1em;
}
ul.foo li:before {
content: "";
background-image: url(http://imgh.us/chevron_1.svg);
background-size: .5em .5em;
background-repeat: no-repeat;
display: inline-block;
vertical-align: top;
position: relative;
top: 50%;
margin-top: -.175em;
width: .5em;
height: .5em;
}
<ul class="foo">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<ul class="foo" style="font-size: 2em">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>