3 Replies Latest reply on Mar 30, 2013 1:54 PM by Fjenngard

    text rendering edge animate adobe muse

    Fjenngard Level 1

      1. created animation in edge animate

      2. export .oam out of edge animate

      3. import .oam in adobe muse

      4. upload site to server with adobe muse

       

      scroll the animation (see link) under the text and the text will be rendered in a different way.

      same thing happens when the animation is for example flying over the text.

       

      what can i do?

       

      link: http://testtype02.businesscatalyst.com/index.html

        • 1. Re: text rendering edge animate adobe muse
          Nancy OShea Adobe Community Professional & MVP

          Text looks the same to me in Firefox.  Which browsers are you using to test with?

           

           

          Nancy O.

          • 2. Re: text rendering edge animate adobe muse
            Fjenngard Level 1

            i installed and tried chrome after posting.

            thus firefox and chrome looks o.k.

             

            BUT try SAFARI. looks like the text will be rendered as an image, or?

            • 3. Re: text rendering edge animate adobe muse
              Fjenngard Level 1

              THINNING TEXT IN WEBKIT (SAFARI)

               

              Safari has a not-so-lovely way of bulking up text using sub-pixel rendering. There have been several ways of dealing with this in the past, but the latest versions of Webkit have given us a much better solution.

               

              On Safari on Leopard and previous versions of OS X, this was fixed with a text-shadow declaration, but since Snow Leopard that method no longer works. With Safari 4 and Snow Leopard, I suggested using -webkit-text-stroke. But now, with Safari 5 and Google Chrome, we actually have a dedicated CSSproperty we can use to render text the way we want.

               

              Here’s the solution, and it’s remarkably simple:

               

              body { -webkit-font-smoothing: antialiased; }

               

              There you go. Simply add that to your css file. Change the selector, if you need, and put your type on a diet.

              found on http://orderedlist.com