www.webdeveloper.com
Results 1 to 3 of 3

Thread: Google Webfont has no Small-Caps

  1. #1
    Join Date
    Oct 2009
    Posts
    15

    Google Webfont has no Small-Caps

    In a post on css-tricks, I recently posted about a problem i encountered with Google's web font directory not having a small-caps variant. So after some messing around i came up with a way to achieve that effect using and inline unordered list and some text sizing;
    Code:
    <html>
       <head>
       <link href=' http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'/>
          <style>
             body{ background: #000; color: #fff; }
             
             #heading li{ display: inline; }
             #headerf{ 
                font: normal 24px/26px 'Yanone Kaffeesatz';
                letter-spacing: .4px;
                text-transform: uppercase;
             }
             #header{ 
                font: normal 15px/26px 'Yanone Kaffeesatz';
                text-transform: uppercase;
                letter-spacing: 1.2px;
             }
             
          </style>
       </head>
       <body>
             <ul id="heading">
                <li id="headerf">j</li>
                <li id="header">eremy</li>
                <li id="headerf">c</li>
                <li id="header">arlsten</li>
             </ul>   
       </body>
    The problem comes when trying to use this text dynamically, the words are split up in separate list elements, If I were to use this for say a header in Wordpress i wouldn't be able to use the admin panel to type in the site name as i could only place it in one element(As far as i know). My questions; first, Is there possibly a better way to achieve the effect? Second; If not, is there possibly some jquery or JavaScript, that could force the separate list elements to act as one?

    Thanks in advance,
    Jeremy Carlsten

  2. #2
    Join Date
    Jul 2010
    Posts
    4
    Why don't you just use {font-variant: small-caps;}?

  3. #3
    Join Date
    Oct 2013
    Posts
    1,694
    First of all you cannot reuse IDs like you are doing. That's the rules. If you need to apply a style to more than one element use class. With that out of the way, here's another idea:

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
       <head>
       <meta charset="UTF-8">
       <title>Jerm993</title>
       <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet'>
          <style>
             body{ background: #000; color: #fff; }
             
             header {
    	    text-transform: uppercase;
                font: normal 15px/26px 'Yanone Kaffeesatz';
                letter-spacing: 1.2px;
    	    padding-top: 1em;
    	    padding-left: 2em;
    	 }
             .headerf{ 
                font: normal 24px/26px 'Yanone Kaffeesatz';
                letter-spacing: .4px;
             }
          </style>
       </head>
       <body>
             <header>
                <span class="headerf">j</span>eremy <span class="headerf">c</span>arlsten
             </header>   
       </body>
    </html>
    Adjust as necessary.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.11399 seconds
  • Memory Usage 2,863KB
  • Queries Executed 15 (?)
More Information
Template Usage (34):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (1)bbcode_html
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (3)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (3)postbit
  • (3)postbit_onlinestatus
  • (3)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (73):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates