响应式网□□站的一个□□□□特点是：一张图片□□□□通常会配□□□上几个字□□□或者一句◇话。在设计的▼时候，就有一个□□□□问题需要▽处理——
字体与图片的位置关系，设计师是如何处理的呢？
 

根据我们□□的观察，不同的设□□□计师对字◆体和图片□□□□位置关系□□的处理办□□□法是不一□□样，不过，如下几个□□□办法是通□□□□用的。

字体大小处理
通常来说，很多图片◤都是有主□□□□体物体的，就是图片△中呈现的□□□主要物体，在这种情□□□□况下，使用的字□□□体不应该◉大于主体△物。如果有的□□□图片没有★主体物，使用的字□□□□体大小也□□应该考虑□□□到用户的□□辨认，不宜过大□□或者过小，不少设计□□师常用14px或12px的字体。

字体所处位置处理
大多数的□□□□图片都是□□有视觉焦◢点的，通常来说，字体应该□□□处于图片□□的视觉焦□□点横竖轴□□□□线上，如果，字体较少，可以直接□□放在视觉□□焦点上。例如，苹果官网□□□□上，几乎所有□□的字体都□□□□位于产品□□□□图视觉焦♦点的数轴□□□□线上方。也有的图△片没有明□□显的视觉□□□焦点，对于这类•图片，文字可以□□□□直接放置□□□□在图片中□□央为宜。

字体与图片边缘的距离
如果图片□□中有主体□□物，字体与图□□片边缘的□□□□距离，应该与主□□体物边缘□□□□的距离相♦等或者差□□不多。这样设计□□的好处是，在视觉上，将字体与□□□图片的主◎体物处于□□并列的状□□□态，一文一图，整个画面□□□□看起来较□□为协调。

字体与图片线条的关系
如果图片□□□□中有明细□□□物体线条，例如，图片中有○河水的流□□□向等等，也就是说，图片中主□□体物是有□□明确的线□□□条的，对于这类□□□□图片，设计师可★以采取两□□□□种办法。一种办法□□□是字体的□□□排版可以□□□□与线条平○行。还有的设□□□□计师可能□□会采用另□□一种办法，让字体的□□排版与主○体物线条·靠近。这两种办□□□□法设计出□□□□来的作品，都不会有□□突兀之感。

字体面与主体物面有交叉
如果字体较多，会形成一个字体面，而如果图片中有主体物，也会形成一个主题面，两个面之间，最好能够形成面与面之间的交叉。这样的视觉呈现，不会让字体或者主体物显得孤立，两者之间会给人有联系的感觉。
在元素较□□□为简单的□□□图片中，单纯使用◎汉字，会更加凸●显出画面◆的单调。设计师会□□□□采取这样△一种处理□□□办法，就是增加□□□数字、英文字体□□□□的使用，将数字、英文、汉字搭配□□□□起来，让整个单□□□□调的画面□□□丰满和丰▼富。在一些庆□□典或者周□□年庆的网□□□页设计中，数字往往□□□□被突出显◈示，配以文字□□□说明，画面冲击☆感十足。

书法字体与网站风格
汉字的变□□□□化范围远•远超过英□□文，这也使得□□汉字字体□□是可以与□□□网站的风□□格进行搭□□配的。例如，一个做古□□□□典家具的□□□英文网站，英文字体□□在怎么变□□化，可能也无◇法传达出□□□古典、传统的概□□□念和意境，但是如果▼使用书法□□□字体，古典的已□□□□经跃然纸□□上。
不难看出，网站中单•单是一个※字体的设□□□计，学问就非□□□常之深、非常之大，这也足以□□看出，网站设计□□是一个“做到老、学到老”的职业，任何一个□□网站设计□□师，概莫能外。

以上说的□□□只是网页❖设计中一□□□个非常小□□□□的细节问□□□□题，但是却也□□是非常重▽要的部分，也是一个□□优秀设计□□师必备技□□能之一。