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

Question

提问by doppelgreener

A webpage I'm working on uses some fancy chevrons for bullet points in a list. I'd like to define a list style that scales with the font size of the list items itself: doing so is the ultimate end goal of my problem here.

我正在处理的一个网页使用一些花哨的 V 形符号作为列表中的项目符号。我想定义一个与列表项本身的字体大小一起缩放的列表样式：这样做是我的问题的最终目标。

We currently keep those chevrons in SVG files (one of which is offered below) so they can be magnified without looking terrible. They're referenced like this:

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

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

We use these chevron lists a few times each around the site. Sometimes they're with large text, sometimes with smaller or normal sized text. We're forced to create a new chevron image for each font size (e.g. chevron-small.svg, chevron-medium.svg, chevron-large.svg, etc), but surely there's a better way that lets us use just the one image and have it scaled up and down on its own based on the font size!

我们在站点周围使用这些 V 形列表几次。有时它们带有大文本，有时带有较小或正常大小的文本。我们被迫为每种字体大小（例如chevron-small.svg、chevron-medium.svg、chevron-large.svg等）创建一个新的 V 形图像，但肯定有更好的方法可以让我们只使用一个图像并根据字体自行放大和缩小尺寸！

However, I haven't figured out how to make the image scale with the font size yet.

但是，我还没有弄清楚如何使用字体大小使图像缩放。

The W3 wiki for list-style-imagesuggests 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 answerto How can I make an svg scale with its parent container?appears to suggest a way to make this percentage thing happen, but when I set a width or height of 100%, the chevron bullet points show up extremely tiny or not at all, even when the font size is large.

列表样式图像的 W3 wiki建议“如果图像的固有宽度或高度以百分比形式给出，那么该百分比将针对 1em 进行解析”，这听起来正是我们想要的。我还没有想出如何做到这一点。布赖恩·坎贝尔 (Brian Campbell)对如何使用其父容器制作 svg 比例的回答？似乎建议了一种方法来实现这个百分比的事情，但是当我将宽度或高度设置为 100% 时，即使字体很大，V 形项目符号点也显示得非常小或根本不显示。

How can I make this list-style-image scale fully with the text size, so that as a UL's text size gets larger, the bullet image does too?

我怎样才能使这个列表样式的图像完全与文本大小一起缩放，以便随着 UL 的文本大小变大，项目符号图像也会变大？

(Glyph fonts:We can't use them. They'd get the job done visually, but they have a bad impact on accessibility because screen readers won't read out the bullets as bullets but as some other weird character. We could define a custom glyph font, possibly, and replace the bullet characters in it with ours, but the file size overhead in doing so would be excessive. As far as I can tell, we need to use an image.)

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

My SVG's code

我的 SVG 代码

The SVG comes from Illustrator and has this code:

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>

Which shows up like the following, where the text is 16px, and the chevron isn't scaling to font size, but is decently large and visible (a bit larger than desired in this case, but let's ignore that, since the image itself can be edited):

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

As I stated, I tried to follow Brian Campbell's answerand set the width or height property to 100%:

正如我所说，我尝试按照Brian Campbell 的回答将宽度或高度属性设置为 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">

However, having either width or height defined as 100% seems to make the chevrons tiny, and much smaller than 1em, as stated:

但是，将宽度或高度定义为 100% 似乎会使 V 形变小，并且远小于 1em，如下所述：

(Screenshot from Firefox. In Chrome they're a little bit bigger, still far smaller than 16px.)

（Firefox 的屏幕截图。在 Chrome 中，它们稍大一点，但仍远小于 16px。）

Code snippet

代码片段

/* 
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

采纳答案by mrkiffie

I would approach solving this problem using a pseudo element before each li

我会在每个之前使用伪元素来解决这个问题 li

Here is the markup

这是标记

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>

Explanation:

解释：

First we get rid of the default bullets on the ul
Then we create a pseudo element in front of each liusing the :beforeselector and content: '\2022';
- The content: '\2022';adds the unicode bullet point, ?, for screen readers to read out. The text indent moves it well out of sight.
We then apply a background (chevron) to the pseudo elements, and size it using a few properties. The key part here is to ensure that the dimensions maintain the same ratio as the svg. The dimensions on the pseudo element are defined using emso that they adjust proportionally when the font-sizeis changed. Finally, we also position the background where the bullet would have been.
- background-size: .4em .7em;tells the browser to size the background the way the image should be sized, we need to maintain the correct aspect ratio here.
- background-position: 0 .3em;moves the chevron image in line with the text.
- width: .4em;makes the psuedo element just wide enough to fit the image, and height: 1em;makes it match line height, and be tall enough to fit the offset as well.

首先我们去掉默认的项目符号 ul
然后我们li使用:before选择器在每个元素前面创建一个伪元素content: '\2022';
- 在content: '\2022';增加了unicode的子弹点，？，屏幕阅读器读出。文本缩进将其移出视线。
然后我们将背景（人字形）应用到伪元素，并使用一些属性来调整它的大小。这里的关键部分是确保尺寸与 svg 保持相同的比例。伪元素上的尺寸是使用定义的，em以便在font-size更改时按比例调整。最后，我们还将背景放置在子弹所在的位置。
- background-size: .4em .7em;告诉浏览器按照图像的大小调整背景大小，我们需要在这里保持正确的纵横比。
- background-position: 0 .3em;根据文本移动 V 形图像。
- width: .4em;使伪元素刚好足够宽以适合图像，并height: 1em;使其与行高匹配，并且足够高以适应偏移。

Caveat:- IE 8 doesn't support background-size, but I presume that this will not be an issue as it also doesn't support rendering svg.

警告：- IE 8 不支持background-size，但我认为这不会成为问题，因为它也不支持渲染 svg。

Answer 2

回答by tonesforchris

In your SVG image XML you must remove the widthand heightattributes, and then the SVG will scale to be 100% or 1em of the font-size

在您的 SVG 图像 XML 中，您必须删除width和height属性，然后 SVG 将缩放为 100% 或 1emfont-size

Here is the base64 version of your image with this done:

这是完成后图像的 base64 版本：

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

Unfortunately you cannot explicitly set the size of a list-style-image, however there is one hack solution which doesn't require any further HTML;

不幸的是，您无法明确设置 a 的大小 list-style-image，但是有一种不需要任何进一步 HTML 的黑客解决方案；

If your LIelements only contain a single line of text (which is quite often the case with lists) then you can use the css selector ::first-lineto scale your font-size up or down without affecting your list-style-image.

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

Giving this alternative solution:

给出这个替代解决方案：

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

回答by apaul

You could define the svg in your css directly and change the height and width as needed, not very DRY, but it works:

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

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

Or you could dry it out a little by using the svg as a background image rather than as a list style image. Note that placing the svg in the css isn't necessary here:

或者，您可以将 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>

Answer 4

回答by apaul

This uses your svg as the background image for the ::before content, sized using em's to keep it the same size as the font. The image will be just smaller than the same size as the text no matter how you size the text or if you zoom in or out.

这使用您的 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>

Answer 5

回答by Rodrigo Calix

You can use SVG as an embed image:

您可以使用 SVG 作为嵌入图像：

<img src="chevron.svg" alt="chevron-icon" class="my-icon" />

*CSS

.my-icon{
    width:50px;
    height:auto;
}

A helpfull article:

一篇有用的文章：

http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

For a better browser compatibility, i recommend convert your SVG files into a font, you can do that here:

为了获得更好的浏览器兼容性，我建议将您的 SVG 文件转换为字体，您可以在此处执行此操作：

https://icomoon.io/

Or use a predesigned font like FontAwesome:

或者使用预先设计的字体，如 FontAwesome：

http://fontawesome.io/

Here you will get the icon that you need:

在这里，您将获得所需的图标：

http://fontawesome.io/icon/chevron-right/

Implement FontAwesome with:

使用以下命令实现 FontAwesome：

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

But i highly recommend that you download the source files instead of using man in middle files.

但我强烈建议您下载源文件，而不是在中间文件中使用 man。

And add this CSS:

并添加此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>

You can get a preview here:

您可以在此处获得预览：

http://jsfiddle.net/a1vkeg6c/1/

Of this way you will have the same retina support of SVG that you want, and even in a more practical way.

通过这种方式，您将获得所需的 SVG 视网膜支持，甚至以更实用的方式。

I hope been helpful!

我希望有帮助！

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

提问by doppelgreener

My SVG's code

我的 SVG 代码

Code snippet

代码片段

采纳答案by mrkiffie

回答by tonesforchris

回答by apaul

回答by apaul

回答by Rodrigo Calix

相关推荐

最近更新

标签

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

提问by doppelgreener

My SVG's code

我的 SVG 代码

Code snippet

代码片段

采纳答案by mrkiffie

回答by tonesforchris

回答by apaul

回答by apaul

回答by Rodrigo Calix

相关推荐

Html 如何仅为 bcc 设置 mailto

嵌套表格行 HTML CSS

HTML：“发送给朋友”链接

Html 如何使 div 动态更改为内容宽度，并在浏览器窗口更改大小时保持该宽度？

相关推荐

最近更新

标签