タグ別アーカイブ: CSS

mobile safari で web font を用いたときに文字の間隔が空いてしまうときの対処方法

経緯

任意の欧文フォントを使用したくて @font-face を用いてオリジナルの font-family で使用するようにしていたのだが、なぜだが欧文フォントの間隔が mobile safari でみると空いてしまう問題がおきた。

原因

どうやら mobile safari のレンダリングのバグなのか、 web font に対して font-weight: bold; が適用されているとそういった表示になってしまうらしい。
任意の欧文フォントを使用する style に関しては font-weight: normal; を適用することで無事解決した。

デザイナーが開発中のモバイル用webサービスにスタイルを追加して、あれこれスマホで確認したい時にやってる方法


Fatal error: Uncaught Error: Call to a member function id() on array in /home/arahell/www/hoihoi/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php:36 Stack trace: #0 /home/arahell/www/hoihoi/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php(538): CrayonFormatter::format_code('', Array, Object(CrayonHighlighter)) #1 [internal function]: CrayonFormatter::delim_to_internal(Array) #2 /home/arahell/www/hoihoi/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php(516): preg_replace_callback('#()#msi', 'CrayonFormatter...', 'static function...') #3 /home/arahell/www/hoihoi/wp-content/plugins/crayon-syntax-highlighter/crayon_highlighter.class.php(166): CrayonFormatter::format_mixed_code('static function...', Object(CrayonLang), Object(CrayonHighlighter)) #4 /home/arahell/www/hoihoi/wp-content/plugins/crayon-syntax-highlighter/crayon_highlighter.class.php(186): CrayonHighlighter->process() #5 /home/arahell/www/hoihoi/wp-content/plugins/crayon-syntax-highlighter/crayon_w in /home/arahell/www/hoihoi/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 36