www.webdeveloper.com
Results 1 to 4 of 4

Thread: HTML5 + CSS3 Website doing something I can't explain

Hybrid View

  1. #1
    Join Date
    Jan 2013
    Posts
    25

    HTML5 + CSS3 Website doing something I can't explain

    Recently I saw a truly amazing website using all the latest technoligies over at fatmedia dot co dot uk

    One fantastic thing this site does is make use of css3 to render some fantastic looking nav bar buttons. It uses the dropshadow indent as well. I wanted to know what font was being used as it was all html and text no images. When I used firebug to inspect the styles being applied firebug clearly showed a line going through the font style being applied via the style sheet but failed to show what style it was infact inheriting.

    I tried to recreate these buttons but they didn't seem quite right. I even went as far as copying the html and css to just see it reproduced and to learn from it but I failed at doing this.

    Finally as a last attempt i viewed the sourced code and saved it locally. Then I put a base url at the top of the page just after the head bracket and put the site url as its base. Then I loaded the local version and everything looked spot on the site worked the same from my c: with one difference. The font wasn't the same! It was slightly different.

    I am so intrigued as to what tricky is being used here to prevent the font being used being identified.

    Any ideas people?

  2. #2
    Join Date
    Nov 2012
    Location
    Jakarta
    Posts
    42

    Lightbulb Fonts found in the html and css source

    From the "style.css", it looks like the website is using :
    1. HelveticaNeue
    2. DobraSlab
    3. proxima-nova
    4. din-condensed-web

    It is also loading font from typekit.net, "proxima-nova" and "din-condensed-web"

    Try googling the font name and see if you can match it.

    Hope that helps.

  3. #3
    Join Date
    Jan 2013
    Posts
    25

    Thanks but that isn't it

    I know that's what the css says, when I use firebug I get this line

    font: bold 1.111em/1.6em 'DobraSlab',arial,sans;

    With a line through it to indicate it is not the font style being applied and it is being overridden from elsewhere. Firebug normally shows what is being applied but it doesn't on this site.

    I don't get it. Why if you save it locally and reference all the style sheets with the absolute paths does it not load locally the same?

    The rest of the imagery and displays 100% accurate locally just not the nav bar. I can't see a logical reason for this but there must be one?

  4. #4
    Join Date
    Jan 2013
    Posts
    25
    Could this be a culprit?

    <script src="//use.typekit.net/xvd0ont.js"></script>

    It's almost as if there is a last minute bit of rending going on. It is also applied to the white huge text infront of the office animation directy below the nav bar. When saved locally the text isn't quite as bold. I'm curious as to why there is a double //. Possibly it is some type of script that does some rending and generates a css from looking at it and possibly it only accepts requests locally from the site server?

    Is this some kind of new protection scheme?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles