Q&A
実際の画面と現象再現するコードがないと他者にはアドバイス不可能です。
それに・・・仕事で請け負っている内容であれば尚更難しいのでは。
前提・実現したいこと
現在、デザインカンプからのコーディング作業(photoshop使用)の
仕事を請け負っております。
font-size,font-weight,font-familiy,line-hight,letter-spacingなど
全ての数値を指示通りに入力しているのですが、
文字スペースが見本と微妙にずれてしまい、
改行部分が変わったり、枠部分に文字が収まらなくなってしまいます。
「や・等の記号やカタカナでのズレが特に顕著です。
解決策があれば教えてください。
回答1件
0
ベストアンサー
「や・はPhotoshopではカーニング（文字詰め）をよくやる文字らしく、WEBではよくズレてしまいます。
対策はいろいろありますが「諦める」しかない事象だと思っています。
いくつか対策をピックアップしてみますが、この二つとも自分はやっていません。
それは手間が掛かりすぎたり、そんなにズレが解消しないからです。
まず一つ目、letter-spacingをその文字だけにマイナスで適応するとカーニングができます。
https://saruwakakun.com/html-css/reference/letter-spacing
こちらの一つ目の方法ですね。この手法は時間と手間が掛かりすぎて実用的ではありませんので、ほとんどしません。
手間がかかる以外にも、メンテナンス性が悪いです。
代わりに「font-feature-settings: "palt"」と言う設定があるんですが、確かに該当の文字を適切に詰めてくれます。が、全体的に詰まりすぎてて読みづらくなってしまいます。
https://ics.media/entry/14087/
なので、個人的にはクライアントに言って「出来ないです」と言うことが多いです。
コーディングだけ切り出されて依頼されている身としては、「出来ない」と言いづらいと思います。
しかしWEBサイトをピクセルパーフェクトで再現することは、コストが掛かる割にはメリットが少ないのであまり再現度に拘らないほうがいいですよ。
投稿2020/01/02 00:15
総合スコア142
takuhito-hihara様
ご回答ありがとうございます。
今回
はじめての受注で、再現度のさじ加減がわからずピクセルパーフェクトにこだわっておりました。
クライアントに一度相談いたしまます。
役に立ったようで何よりです。
コーディングだけをやっているとピクセルパーフェクトに拘りがちですが、ビジネスの観点から考えると何より出してしまうのが大事なんですよね。
初案件なかなか大変でしょうが、頑張ってくださいー。
あなたの回答
tips
プレビュー
