[英]How can I make a list-style-image scale with the list's font size, when we can't use glyph fonts?
A webpage I'm working on uses some fancy chevrons for bullet points in a list. 我正在处理的网页在列表中使用一些花哨的V形符号表示要点。 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.
我想定义一个列表样式,该样式与列表项本身的字体大小成比例:这是我在这里遇到的最终问题。
We currently keep those chevrons in SVG files (one of which is offered below) so they can be magnified without looking terrible. 我们目前将这些人字形文件保存在SVG文件中(下面提供了其中的一个),因此可以放大它们而不会看起来很糟。 They're referenced like this:
他们被这样引用:
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 (eg
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! 我们被迫为每种字体大小(例如
chevron-small.svg
, chevron-medium.svg
, chevron-large.svg
等)创建一个新chevron-small.svg
图像,但是肯定有更好的方法让我们仅使用一种图像,并根据字体大小自行缩放!
However, I haven't figured out how to make the image scale with the font size yet. 但是,我还没有弄清楚如何用字体大小缩放图像。
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. 用于列表样式图像的W3 Wiki建议“如果图像的固有宽度或高度以百分比给出,则该百分比将与1em解析”,这听起来正是我们想要的。 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?
Brian Campbell对我如何使用其父容器制作svg秤 的答案 ? 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.
似乎暗示了实现此百分比的一种方法,但是当我将宽度或高度设置为100%时,即使字体很大,人字形符号也会显示得非常小或根本没有。
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.) ( 字形字体:我们无法使用它们。它们会以视觉方式完成工作,但是它们对可访问性产生了不良影响,因为屏幕阅读器不会将项目符号读出为项目符号,而是其他一些奇怪的字符。我们可以定义可以使用自定义字形字体,并用我们的字形字符替换其中的项目符号字符,但是这样做的文件大小开销会过大。据我所知,我们需要使用图像。)
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,并且人字形没有按比例缩放到字体大小,但是相当大且可见(在这种情况下比期望的要大一些,但是我们可以忽略它,因为图像本身可以进行编辑):
As I stated, I tried to follow Brian Campbell's answer and set the width or height property to 100%: 如我所说,我尝试遵循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">
However, having either width or height defined as 100% seems to make the chevrons tiny, and much smaller than 1em, as stated: 但是,将宽度或高度定义为100%似乎会使人字形变得很小,并且比1em小得多,如下所述:
(Screenshot from Firefox. In Chrome they're a little bit bigger, still far smaller than 16px.) (来自Firefox的屏幕截图。在Chrome中,它们有些大,但仍远小于16像素。)
/* 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,='); /* 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>
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: '\\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,='); 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: 说明:
ul
ul
上的默认项目符号 li
using the :before
selector and content: '\\2022';
:before
选择器和content: '\\2022';
:before
每个li
前面创建一个伪元素content: '\\2022';
content: '\\2022';
content: '\\2022';
adds the unicode bullet point , •, for screen readers to read out. em
so that they adjust proportionally when the font-size
is changed. em
定义伪元素的尺寸,以便在更改font-size
时按比例调整font-size
。 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;
height: 1em;
makes it match line height, and be tall enough to fit the offset as well. 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。
In your SVG image XML you must remove the width
and height
attributes, and then the SVG will scale to be 100% or 1em of the font-size
在SVG图片XML中,您必须删除
width
和height
属性,然后SVG将缩放为font-size
100%或1em
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; 不幸的是,您不能显式设置
list-style-image
的大小,但是有一种hack解决方案不需要任何其他HTML。
If your LI
elements only contain a single line of text (which is quite often the case with lists) then you can use the css selector ::first-line
to 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%;
}
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,并根据需要更改高度和宽度,虽然不是很干,但是可以使用:
.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. 或者,您可以通过使用svg作为背景图像而不是列表样式图像来使其变干。 Note that placing the svg in the css isn't necessary here:
请注意,此处不需要将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>
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. 这会将您的svg用作:: before内容的背景图像,并使用em对其进行大小设置以使其与字体大小相同。 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.
无论您如何调整文字大小或放大或缩小,图像都将小于与文字相同的大小。
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>
You can use SVG as an embed image: 您可以将SVG用作嵌入图像:
<img src="chevron.svg" alt="chevron-icon" class="my-icon" />
*CSS * CSS
.my-icon{
width:50px;
height:auto;
}
A helpfull article: 有用的文章:
http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php http://soqr.fr/testsvg/embed-svg-liquid-layout-sensitive-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/ https://icomoon.io/
Or use a predesigned font like FontAwesome: 或者使用预先设计的字体,例如FontAwesome:
http://fontawesome.io/ http://fontawesome.io/
Here you will get the icon that you need: 在这里,您将获得所需的图标:
http://fontawesome.io/icon/chevron-right/ 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 的HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
You can get a preview here: 您可以在这里获得预览:
http://jsfiddle.net/a1vkeg6c/1/ 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! 希望对您有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.