css - CSS是对的吗？

Question

下面是我的 CSS 文件和我引用的图像。在图片中，它是第 1 天，但如果它是第 10 天，或者任何其他两位数的日子，2013 年会还是没有？这是一个愚蠢的问题，我知道，但我不确定整个边距、填充、位置和浮动因素。

改写的问题：我不太擅长填充和边距，所以也许我问错了问题。图为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 字体，有许多免费的在线转换器可用，

那么代码将是这样的......对于'Droid Serif'

@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;
}