블로그의 글꼴을 정하자.

어제 저녁에 티스토리의 블로그의 글꼴을 다시 바꿨다.

 

특별한 이유보다는 컴퓨터와 휴대폰에서 보여지는 글꼴이 똑같고, 글자 주변의 뿌옇 그림자? 현상이 나타나지 않고, 글꼴 자체도 마음에 들어서다.

마음에 드는 글꼴을 찾기 위해 하루를 소비하다가 전에 한 번 본 기억이 있는 글꼴이 생각나 다시 찾아서 변경을 했다.

 

렉시 새봄R

티스토리의 블로그에 '렉시 새봄R 웹폰트' 설치와 적용법을 가르켜 주고 있는 곳이다.

 : https://www.cmsfactory.net/node/11354

 

내 블로그에도 가르켜 주는 그대로 적용시켰다.

따로 손을 댈 필요가 없다.

/* style.css 글꼴 태그 적은 후 */ @font-face { font-family: ls; src: url('./images/LexiSaebomR.eot'); src: url('./images/LexiSaebomR.eot?#iefix') format('embedded-opentype'), url('./images/LexiSaebomR.woff') format('woff'), url('./images/LexiSaebomR.ttf') format('truetype'), url('./images/LexiSaebomR.svg') format('svg'); } /* 글꼴 설정은... */ body { font-family:ls; font-size:15px; font-style:normal; line-height:normal; color:#777;}

 

그래도 나는 손을 댔다.  글자의 간격이 좁게 보여 넓혀주고, 단어사이를 좀 더 넓혀줬다.

/* 본문 글자 */ .skin_view .area_view p { font-size:17px; color:#777; line-height:25px; letter-spacing:0.5px; word-spacing:1px; }

 

 

 

 

▼ 20160618

 

글꼴을 다시 '다음 스퀘어' 웹폰트로 바꿨다.

글자 크기가 '17px'에서 가장 좋은 모습을 보여주는 글꼴이다.  크기가 '17px'보다 작은 글자에서는 글자가 어긋나게 보인다. 

 

빨리 글꼴을 정해야 하는데...

 

 

▼ 20160621

 

글자정렬

/* mobile_본문 글자정렬 */ .skin_view .area_view p { font-size:15px; line-height:23px; margin-bottom:7px; text-align:justify; /* 양쪽정렬 */ overflow-wrap:normal; /* 자동으로 줄바꿈 */ word-break:break-all; /* 글자단위로 줄바꿈 */ white-space:normal; /* 공백 1개만 표시하면서 줄바꿈 */}

 

컴퓨터 화면에서는 글자 정렬이 필요가 없을 것 같아 휴대폰 화면에서만 글자를 양쪽정렬로 적용했다.

조금이라도 깔끔하게 정돈된 화면으로 보여지길 바라면서...

 

 

글을 작성할 때 줄 간격, 문단간격에 신경이 쓰인다.

티스토리의 글쓰기 화면에서 작성하는 화면과 글을 작성하고 난 후의 컴퓨터 화면과 휴대폰의 화면이 서로 다르게 보이기 때문이다.

특히, 휴대폰 화면에서는 글꼴과 문단간격에 따라 글을 읽을 때 얼마나 편하게 읽을 수 있는지 결정이 된다고 할 수도 있기 때문이다.

 

글을 작성할 때...

문단 간격을 CSS에서 정해놓고 글을 작성하면 휴대폰의 화면에서도 어느 정도는 내가 원하는 간격을 나타낼 수 있기 때문에 근래에는 문단 간격 없음에 체크를 하지않고 글을 적고 있다.

컴퓨터 화면에서는 원하는 간격 그대로 보이기 때문에 전혀 신경을 안 쓰고 휴대폰 화면만 집중 신경쓰고 있다.

 

휴대폰의 화면에서는 간격이 많이 벌어져 보이는 큰 문단 _엔터 키 2번 사용_ , 간격이 좁게 보이는 작은 문단 _엔터 키 1번 사용_ 으로 내 나름대로 나눠서 보이게 만들었다.

 

자세하게 설명해 주는 곳이 있다.

: http://ccz-cross.tistory.com/1