当我们无法使用字形字体时，如何使用列表的字体大小来缩放列表样式的图像?

本文介绍了当我们无法使用字形字体时，如何使用列表的字体大小来缩放列表样式的图像?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在开发的网页使用一些花哨的V形符号来显示列表中的项目符号.我想定义一种列表样式，该样式与列表项本身的字体大小成比例:这是我的问题的最终最终目标.

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.

我们目前将这些人字形文件保存在SVG文件中(下面提供了其中的一个)，以便可以放大它们而不会看起来很糟.它们的引用是这样的:

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:

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

我们在站点周围多次使用这些人字形列表.有时它们带有大文本，有时带有较小或正常大小的文本.我们被迫为每种字体大小(例如chevron-small.svg，chevron-medium.svg，chevron-large.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!

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

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

用于列表样式图像的W3 Wiki 建议如果图像的固有宽度或高度以百分比给出，则该百分比将与1em解析"，这听起来正是我们想要的.不过，我还没有弄清楚如何做到这一点. Brian Campbell的答案对用其父容器制作一个svg刻度?似乎暗示了实现该百分比的一种方法，但是当我将宽度或高度设置为100％时，人字形子弹点会显示得非常小或根本没有，即使字体很大.

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

我怎样才能使列表样式图像完全随文本大小而变，以便当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.)

SVG来自Illustrator，具有以下代码:

The SVG comes from Illustrator and has this code:

<?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像素，人字形不按比例缩放到字体大小，但是相当大且可见(在这种情况下比期望的要大一些，但是我们可以忽略它，因为图片本身可以编辑):

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):

正如我所说，我尝试遵循 Brian Campbell的回答，并将width或height属性设置为100％:

As I stated, I tried to follow Brian Campbell's answer and set the width or height property to 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小得多，如所述:

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

(来自Firefox的屏幕截图.在Chrome中，它们稍大一些，但仍远小于16像素.)

(Screenshot from Firefox. In Chrome they're a little bit bigger, still far smaller than 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>

推荐答案

我将在每个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>

说明:

首先，我们摆脱ul
然后我们使用:before选择器和content: '\2022';在每个li前面创建一个伪元素
- content: '\2022';添加 unicode项目符号， •，供屏幕阅读器读出.文本缩进将其移到视线之外.
- First we get rid of the default bullets on the ul
- Then we create a pseudo element in front of each li using the :before selector 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.
  - background-size: .4em .7em;告诉浏览器以应调整图像大小的方式来调整背景大小，我们需要在此处保持正确的宽高比.
  - background-position: 0 .3em;将人字形图像移动到与文本对齐的位置.
  - width: .4em;使psuedo元素足够宽以适合图像，并且height: 1em;使psuedo元素与线高匹配，并且也高到足以适合偏移量.
  - 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.
  注意:-IE 8不支持background-size，但是我认为这不会成为问题，因为它也不支持呈现svg.
  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.
  
  这篇关于当我们无法使用字形字体时，如何使用列表的字体大小来缩放列表样式的图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！