就业培训     下载中心     Wiki     联络
登录   注册

Log
  1. 首页
  2. SVG:可伸缩向量图形
  3. SVG Attribute reference
  4. kerning

内容表

  • 范例
  • 用法注意事项
  • 浏览器兼容性
  • 另请参阅

kerning

  1. SVG 元素
    1. A
      1. <a>
      2. <altGlyph>
      3. <altGlyphDef>
      4. <altGlyphItem>
      5. <animate>
      6. <animateColor>
      7. <animateMotion>
      8. <animateTransform>
    2. B-C
      1. <circle>
      2. <clipPath>
      3. <color-profile>
      4. <cursor>
    3. D
      1. <defs>
      2. <desc>
    4. E
      1. <ellipse>
    5. F
      1. <feBlend>
      2. <feColorMatrix>
      3. <feComponentTransfer>
      4. <feComposite>
      5. <feConvolveMatrix>
      6. <feDiffuseLighting>
      7. <feDisplacementMap>
      8. <feDistantLight>
      9. <feFlood>
      10. <feFuncA>
      11. <feFuncB>
      12. <feFuncG>
      13. <feFuncR>
      14. <feGaussianBlur>
      15. <feImage>
      16. <feMerge>
      17. <feMergeNode>
      18. <feMorphology>
      19. <feOffset>
      20. <fePointLight>
      21. <feSpecularLighting>
      22. <feSpotLight>
      23. <feTile>
      24. <feTurbulence>
      25. <filter>
      26. <font>
      27. <font-face>
      28. <font-face-format>
      29. <font-face-name>
      30. <font-face-src>
      31. <font-face-uri>
      32. <foreignObject>
    6. G
      1. <g>
      2. <glyph>
      3. <glyphRef>
    7. H
      1. <hkern>
    8. I
      1. <image>
    9. J-L
      1. <line>
      2. <linearGradient>
    10. M
      1. <marker>
      2. <mask>
      3. <metadata>
      4. <missing-glyph>
      5. <mpath>
    11. N-P
      1. <path>
      2. <pattern>
      3. <polygon>
      4. <polyline>
    12. Q-R
      1. <radialGradient>
      2. <rect>
    13. S
      1. <script>
      2. <set>
      3. <stop>
      4. <style>
      5. <svg>
      6. <switch>
      7. <symbol>
    14. T
      1. <text>
      2. <textPath>
      3. <title>
      4. <tref>
      5. <tspan>
    15. U
      1. <use>
    16. V-Z
      1. <view>
      2. <vkern>

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the 兼容性表格 at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

kerning attribute indicates whether the spacing between glyphs should be adjusted based on kerning tables that are included in the relevant font (i.e., enable auto-kerning) or instead disable auto-kerning and set the spacing between them to a specific length (typically, zero).

注意: As a presentation attribute kerning can be used as a CSS property. In CSS the property is called font-kerning , though.

You can use this attribute with the following SVG elements:

  • <altGlyph>
  • <textPath>
  • <text>
  • <tref>
  • <tspan>

范例

html, body, svg {
  height: 100%;
  font: 36px Verdana, Helvetica, Arial, sans-serif;
}

											
<svg viewBox="0 0 150 125" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="30" kerning="auto">auto</text>
  <text x="10" y="70" kerning="0">number</text>
  <text x="10" y="110" kerning="20px">length</text>
</svg>

											

用法注意事项

值 auto | <length>
默认值 auto
Animatable Yes
auto

This value indicates that the spacing between glyphs is adjusted based on kerning tables that are included in the font that will be used.

<length>

If a length is provided, then auto-kerning is disabled. Instead, inter-character spacing is set to the given length.

If a length is provided without a unit identifier (e.g., an unqualified number such as 128), the length is processed as a width value in the current user coordinate system. If a unit identifier (e.g., 0.25em or 1% ) is provided, then the length is converted into a corresponding value in the current user coordinate system.

The most common scenario, other than auto , is to set kerning to a value of 0 so that auto-kerning is disabled.

The given length is added to the inter-character spacing value specified by the letter-spacing 属性。

浏览器兼容性

BCD tables only load in the browser

另请参阅

  • css font-kerning

Found a problem with this page?

  • Edit on GitHub
  • Source on GitHub
  • Report a problem with this content on GitHub
  • Want to fix the problem yourself? See our Contribution guide .

最后修改: Sep 23, 2021 , 由 MDN 贡献者

版权所有  © 2014-2026 乐数软件    

工业和信息化部: 粤ICP备14079481号-1