

ピクセルパーフェクトで、サイトの制作をしようとしていますが、  
文章の文字一文字一文字の位置を一回一回調節しないと、出来ないのでしょうか？

[code]

    <div class="header-outer">
    <p class="header-time"><span class="header-time-second">平日</span>０<span class="header-time-third">８:</span><span class="header-time-fifth">０</span><span class="header-time-fourth">０〜</span><span class="header-time-third">2０:</span>００</p>
    <div class="header-content">
    
    header .header-container .header-wrapper-second .header-outer .header-time {
        font-size: 11px;
        margin-right: 25px;
        letter-spacing: -4.3px;
    }
    header .header-container .header-wrapper-second .header-outer .header-time .header-time-second{
        font-size: 13px;
        letter-spacing: -2px;
    }
    
    header .header-container .header-wrapper-second .header-outer .header-time .header-time-third{
        letter-spacing: -1.9px;
    }
    
    
    header .header-container .header-wrapper-second .header-outer .header-time .header-time-fourth{
        letter-spacing: -1px;
    }
    
    header .header-container .header-wrapper-second .header-outer .header-time .header-time-fifth{
        letter-spacing: -4px;
    }
    
[/code]

ここまでしないと位置を揃えることが出来ません。  
フォントは見本と同じはずです。

指定しているフォントは游ゴシック体で、CSSには下記のように記入しています。

[code]

    body {
        font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    }
    
[/code]

検証ツールで確認したところ  
レンダリング フォント  
Hiragino Kaku Gothic ProN—ローカル ファイル（15 件のグリフ）となっています。

**表示結果:**  
[![](https://i.stack.imgur.com/mx1e0.png)](https://i.stack.imgur.com/mx1e0.png)

[![画像の説明をここに入力](https://i.stack.imgur.com/YPd09.png)](https://i.stack.imgur.com/YPd09.png)

[![画像の説明をここに入力](https://i.stack.imgur.com/mZQbg.png)](https://i.stack.imgur.com/mZQbg.png)


CC BY-SA 4.0
2022-01-21T07:59:40.203
85839
2022-01-21T14:25:21.547
2022-01-21T14:25:21.547
49042
49042
question
html css
ピクセルパーフェクトのやり方が分からず、文章が一文字ずつずれてしまう