MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
您的搜尋結果

    text-rendering

    Our volunteers haven't translated this article into 正體中文 (繁體) yet. Join us and help get the job done!

    « SVG Attribute reference home

    The creator of SVG content might want to provide a hint about what tradeoffs to make as the browser renders text. The text-rendering attribute provides these hints.

    As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css text-rendering for further information

    Usage context

    Categories Presentation attribute
    Value auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit
    Animatable Yes
    Normative document SVG 1.1 (2nd Edition)
    auto
    Indicates that the browser shall make appropriate tradeoffs to balance speed, legibility and geometric precision, but with legibility given more importance than speed and geometric precision.
    optimizeSpeed
    Indicates that the user agent shall emphasize rendering speed over legibility and geometric precision. This option will sometimes cause some browsers to turn off text anti-aliasing.
    optimizeLegibility
    Indicates that the browser shall emphasize legibility over rendering speed and geometric precision. The user agent will often choose whether to apply anti-aliasing techniques, built-in font hinting or both to produce the most legible text.
    geometricPrecision
    Indicates that the browser shall emphasize geometric precision over legibility and rendering speed. This option will usually cause the user agent to suspend the use of hinting so that glyph outlines are drawn with comparable geometric precision to the rendering of path data.

    Example

    <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg"
       version="1.1" width="660" height="40"
       text-rendering="optimizeLegibility">
      <link xmlns="http://www.w3.org/1999/xhtml" href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css' />
      <style>
          text {font: 30px 'Sofadi One', cursive;}
      </style>
      <g>
        <text y="30">The quick brown fox jumps over the lazy dog.</text>
      </g>
    </svg>

    optimizeLegibility (first) и geometricPrecision (second)
    text-rendering=optimizeLegibility
    text-rendering=geometricPrecision

    Similarly acts css text-rendering

    <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg"
       version="1.1" width="660" height="40">
      <link xmlns="http://www.w3.org/1999/xhtml" href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css' />
      <style>
          text {
                font: 30px 'Sofadi One', cursive;
                text-rendering: optimizeLegibility;
             }
      </style>
      <g>
        <text y="30">The quick brown fox jumps over the lazy dog.</text>
      </g>
    </svg>

    Elements

    The following elements can use the text-rendering attribute

    See also

    Document Tags and Contributors

    Contributors to this page: BaNru, Jeremie
    最近更新: BaNru,