CSS是正確的嗎？

Question

下面是我的CSS文件和我參考的圖片。在圖片中，這是第一個，但如果是第十個或其他兩位數的日期，2013年還是不會？這是一個愚蠢的問題，我知道，但我不確定整個保證金，填充，位置和浮動因素。

REPHRASED問題：我對填充和邊距不太滿意，所以我可能會問錯誤的問題。圖爲2013年4月1日，很棒。但是我想知道4月10日（第二位數字）是否會讓2013年轉向右側（我想要的），是否與2013年重疊，或者轉到其他地方，而不是在那條線上？原因我問的是，因爲我的利潤率，填充，花車，和立場，我不知道它是否會影響它..

@font-face { 

    font-family: Walkway Bold; 

    src: url('Fonts/WalkwayBold.ttf'); 
} 


@font-face { 

    font-family: Roboto; 

    src: url('Fonts/Roboto.ttf'); 
} 

@font-face { 

    font-family: CaviarDreams; 

    src: url('Fonts/CaviarDreams.ttf'); 
} 

body { 

    font-family: Roboto; 
    margin: 0; 
    padding:0; 
    background: #000; 
    background-size: 61%; 
    color:#FFF; 
    text-shadow:3px 3px 7px #000000; 

} 

div#content { 
    position:absolute; 
    -webkit-transform: rotate(0deg); 
    left:75px; 
    top:0px; 
} 

div#timecluster { 
    font-family: Roboto; 
    position:absolute; 
    text-align:center; 
    top:30px; 
    left:-95px; 
    color:#fff; 
    clear:left; 
    width:345px; 
    opacity:.8; 
} 

div#hourbox { 
    font-family: Roboto; 
    text-align:right; 
    color:#ffffff; 
    position:relative; 
    font-size:75px; 
    letter-spacing:-5px; 
    margin-right:3px; 
    font-weight:bold; 
} 

div#minutebox { 
    font-family: Roboto; 
    position:relative; 
    opacity: 0.2; 
    font-size:75px; 
    letter-spacing:-5px; 
    margin-left:10px; 
    font-weight:bold; 
} 

div#ampmbox { 
    text-align:right; 
    position:relative; 
    font-size:75px; 
    letter-spacing:-5px; 
    font-weight:bold; 
    margin-top:-5px; 
    right: -5; 
} 

div#datecluster { 
    position:absolute; 
    top:90px; 
    left:-130px; 
    width:380px; 
    height:180px; 
} 

div#dateinner { 
    position:absolute; 
    top:40px; 
    left:40px; 
    width:300px; 
    height:90px; 
} 



div#monthbox { 
    font-family: CaviarDreams; 
    position:absolute; 
    float:left; 
    padding:0; 
    font-size:20px; 
    opacity:0.2; 
    width:135px; 
    text-align:right; 
    top: -19px; 
} 

div#daybox { 
    font-family: CaviarDreams; 
    position:relative; 
    float:left; 
    padding:0; 
    font-size:20px; 
    opacity:0.2; 
    width:135px; 
    text-align:right; 
    top: 1; 
} 

div#datebox { 
    font-family: Roboto; 
    position:relative; 
    float:left; 
    margin:-20px 4 0 10; 
    font-size:40px; 
    opacity:.8; 
    text-align:center; 
} 

div#yearbox { 
    font-family: Roboto; 
    position:relative; 
    float:none; 
    margin:-20 0 0 0px; 
    font-size:40px; 
    opacity:.1; 
top:0; 
right: 0; 
} 

Answer 1

是的，但在上下文中你的問題是，一些瀏覽器默認不支持TTF方面，所以你可以將它們轉換爲「WOFF」支持更好，

使用谷歌的字體都是免費的，如果適合您的需求呢:)

或在woff中轉換你的ttf字體，許多免費的o n線轉換器是可用的，

那麼代碼會是這樣。對於「Droid的襯線」

@font-face { 
    font-family: 'Droid Serif'; 
    font-style: normal; 
    font-weight: 700; 
    src: local('Droid Serif Bold'), local('DroidSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/droidserif/v3/QQt14e8dY39u-eYBZmppwTqR_3kx9_hJXbbyU8S6IN0.woff) format('woff'); 
} 

我希望這將幫助你:)

具有更新的問題

添加一些保證金爲剩餘年份，

已更新的答案。

div#yearbox { 
font-family: Roboto; 
position:relative; 
float:left; 
margin:-20 0px 0px 10px; 'this last element will represent margin left i.e. 10px 
font-size:40px; 
opacity:.1; 
top:0; 
}