웹개발 메모장

[웹폰트] PC통신 웹폰트 둥근모, 네오둥근모, 네오둥근모 수정

전체 자바스크립트 CSS PHP HTML 기타
등록일 :

PC통신 폰트를 웹에서 볼 수 없을까?

웹페이지에 PC통신 폰트를 적용하는 방법입니다.

정말로 딱 필요한것을 구하기 위한 과정이
생각보다 험난 하였습니다.

그리고 이런 폰트를 제작해 주신 분들께 감사드립니다.

둥근모 폰트

처음에 찾은것이 둥근모 폰트입니다.
희망을 보게된 폰트인데 아쉽게도 IE에서는 안됩니다.
IE10 기준 작동하지 않습니다.
크롬, 파이어폭스 에서는 잘 됩니다.

조금 고민하다 혹시나 하는 생각에 다시 검색 !!!

둥근모 적용예제 (예제에 타이핑 가능)

문제점
- 괘선문자 너비가 문자와 달라서 박스가 깨짐.
- 괘선문자 세로줄에 간격이있어서 쭉 이어지지 않음.

CSS

@font-face {
  font-family:'vtfont'; /* 폰트 이름은 임의로 설정 */
  src:url('//tistory4.daumcdn.net/tistory/214191/skin/images/DungGeunMo.woff2') format('woff2');
  font-style:normal;
  font-weight:normal;
}

.bluescreen{
	width:650px;
	height:320px;
	font-family:'vtfont'; /* 임의로 설정한 폰트이름 사용 */
	font-size:16px !important;
	color:#fff !important;
	background:#0000A8 !important;
	line-height:16px !important;
	padding:30px !important;
	box-shadow:0 0 40px rgba(0,0,0,0.35) inset !important;
}

HTML

<textarea class="bluescreen">┍━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┑
│☞ 불건전 정보 유통 방지를 위한 모니터링 및 제재 강화 - 정보통신윤리위원회│
│  - 매춘(원조교제) 알바모집방 개설 : 무기한 사용중지 및 관련 수사기관통보 │
│  - 불건전 만남 유도 대화방제 사용 : 발견 즉시 사용중지 3개월             │
│  - 기타 불건전한 성격의 방제 사용 : 경고 후 재적발시 사용중지 3개월      │
│☞ 불건전대화 및 언어폭력을 하는 회원은 "/SAVE" 명령어로 신고합시다.      │
│☞ 대화수신 거부 명령어는 "/EX" 이며, 초대 및 메모 거부는 "ME N" 입니다.  │
│☞ 성적언어폭력을 행사하는 경우, 피해자가 신고시 가해자는 법적 처벌을 받을│
│   수 있습니다. 우리 모두 건전한 언어를 사용합시다.                       │
│☞ 신고방법은 go SINGO메뉴를 참고해 주시기 바랍니다.                      │
│☞ 신고센터(ZSOS5~10), 모니터링 (ZMOP1~7), ZCENTER 외에는 대화방 운영자 ID│
│   가 아닙니다. 비밀번호 입력을 요청당하면 신고센터에 즉시 신고합시다     │
┕━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┙
초대형대화나라(CHAT)
  ┌────────────────────────────────────┐
  │ [주의] 천리안 운영자는 어떤 경우에도 사용자의 비밀번호를 묻지않습니다. │
  │        운영자를 사칭하거나, 특히 음성 채팅을 운운하며 비밀번호와 주민  │
  │        등록번호를 입력하라는 회원은 발견 즉시 신고합시다. (go SINGO)   │
  └────────────────────────────────────┘</textarea>

실행 가능한 소스

네오둥근모 (Neo둥근모)

이 폰트는 둥근모폰트 보다 용량도 작고 IE에서도 잘 됩니다.

PC통신 시절에는 괘선 문자로 박스를 그리거나
텍스트아트(!?)를 했기 때문에 당시의 글을 제대로 보여주려면
글자와 자간이 같아야 하는데 아쉽게도 그렇지 않습니다.

그리고 더 이상의 다른 선택지는 없었습니다.

네오둥근모 적용예제 (예제에 타이핑 가능)

둥근모폰트 대비
- 괘선문자 세로줄의 간격이 없어서 잘 이어짐.

문제점
- 괘선문자 너비가 문자와 여전히 다름. ㅠㅠ

※ 참고
- 가로 세로 16px 의 폰트입니다.
- font-size:16px; 로 설정해야 뭉개짐 없이 보임.

CSS

@font-face {
  font-family:'vtfont'; /* 폰트 이름은 임의로 설정 */
  src:url('//tistory4.daumcdn.net/tistory/214191/skin/images/neodgm.ttf') format('truetype');
  font-style:normal;
  font-weight:normal;
}
.bluescreen{
	width:650px;
	height:320px;
	font-family:'vtfont', 굴림;
	font-size:16px !important;
	color:#fff !important;
	background:#0000A8 !important;
	line-height:16px !important;
	padding:30px !important;
	box-shadow:0 0 40px rgba(0,0,0,0.35) inset !important;
}

HTML

<textarea class="bluescreen">┍━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┑
│☞ 불건전 정보 유통 방지를 위한 모니터링 및 제재 강화 - 정보통신윤리위원회│
│  - 매춘(원조교제) 알바모집방 개설 : 무기한 사용중지 및 관련 수사기관통보 │
│  - 불건전 만남 유도 대화방제 사용 : 발견 즉시 사용중지 3개월             │
│  - 기타 불건전한 성격의 방제 사용 : 경고 후 재적발시 사용중지 3개월      │
│☞ 불건전대화 및 언어폭력을 하는 회원은 "/SAVE" 명령어로 신고합시다.      │
│☞ 대화수신 거부 명령어는 "/EX" 이며, 초대 및 메모 거부는 "ME N" 입니다.  │
│☞ 성적언어폭력을 행사하는 경우, 피해자가 신고시 가해자는 법적 처벌을 받을│
│   수 있습니다. 우리 모두 건전한 언어를 사용합시다.                       │
│☞ 신고방법은 go SINGO메뉴를 참고해 주시기 바랍니다.                      │
│☞ 신고센터(ZSOS5~10), 모니터링 (ZMOP1~7), ZCENTER 외에는 대화방 운영자 ID│
│   가 아닙니다. 비밀번호 입력을 요청당하면 신고센터에 즉시 신고합시다     │
┕━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┙
초대형대화나라(CHAT)
  ┌────────────────────────────────────┐
  │ [주의] 천리안 운영자는 어떤 경우에도 사용자의 비밀번호를 묻지않습니다. │
  │        운영자를 사칭하거나, 특히 음성 채팅을 운운하며 비밀번호와 주민  │
  │        등록번호를 입력하라는 회원은 발견 즉시 신고합시다. (go SINGO)   │
  └────────────────────────────────────┘</textarea>

실행 가능한 소스

네오둥근모 괘선문자 직접 수정하기

목마른 사람이 우물을 파는걸까요?
일부 괘선문자를 직접 수정하여 다른 문자와 너비를 맞추었습니다.
하지만 모든 괘선 문자를 수정한게 아니라서 완벽하지 않습니다.

폰트를 수정하는 공개 프로그램을 이용하여 약간의 학습 후
깨지는 괘선문자만 찾아서 자간에 맞게 수정하였습니다.

그리고 그 결과는 !!!

네오둥근모 일부 괘선문자 수정본 예제 (타이핑 가능)

해결
- 괘선문자로 그려진 박스가 완벽히 보임.

문제점
- 네오둥근모에는 예제에 사용한 "손가락" 그림 문자가 없습니다.
그림 문자가 대부분 구현되어 있지 않습니다. 둥근모에는 있음.
그래서 없는 문자는 기본 폰트에서 표시가 됩니다.

IE에서는 손가락이 들어가면 글자 높이가 미묘하게 달라져서
줄간격이 달라지는 문제가 있습니다.
그래서 괘선 문자 박스 세로줄이 약간씩 벌어집니다.
IE는 항상 이런식 ...

해결법으로는 폰트에 직접 그림문자를 그려 넣으면 되지만..
그건 좀 어렵네요 ... ^^;;;

CSS

@font-face {
  font-family:'vtfont';
  src:url('//tistory4.daumcdn.net/tistory/214191/skin/images/NeoDunggeunmo.ttf') format('truetype');
  font-style:normal;
  font-weight:normal;
}
.bluescreen{
	width:650px;
	height:320px;
	font-family:'vtfont', 굴림;
	font-size:16px !important;
	color:#fff !important;
	background:#0000A8 !important;
	line-height:16px !important;
	padding:30px !important;
	box-shadow:0 0 40px rgba(0,0,0,0.35) inset !important;
}

HTML

<textarea class="bluescreen">┍━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┑
│☞ 불건전 정보 유통 방지를 위한 모니터링 및 제재 강화 - 정보통신윤리위원회│
│  - 매춘(원조교제) 알바모집방 개설 : 무기한 사용중지 및 관련 수사기관통보 │
│  - 불건전 만남 유도 대화방제 사용 : 발견 즉시 사용중지 3개월             │
│  - 기타 불건전한 성격의 방제 사용 : 경고 후 재적발시 사용중지 3개월      │
│☞ 불건전대화 및 언어폭력을 하는 회원은 "/SAVE" 명령어로 신고합시다.      │
│☞ 대화수신 거부 명령어는 "/EX" 이며, 초대 및 메모 거부는 "ME N" 입니다.  │
│☞ 성적언어폭력을 행사하는 경우, 피해자가 신고시 가해자는 법적 처벌을 받을│
│   수 있습니다. 우리 모두 건전한 언어를 사용합시다.                       │
│☞ 신고방법은 go SINGO메뉴를 참고해 주시기 바랍니다.                      │
│☞ 신고센터(ZSOS5~10), 모니터링 (ZMOP1~7), ZCENTER 외에는 대화방 운영자 ID│
│   가 아닙니다. 비밀번호 입력을 요청당하면 신고센터에 즉시 신고합시다     │
┕━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┙
초대형대화나라(CHAT)
  ┌────────────────────────────────────┐
  │ [주의] 천리안 운영자는 어떤 경우에도 사용자의 비밀번호를 묻지않습니다. │
  │        운영자를 사칭하거나, 특히 음성 채팅을 운운하며 비밀번호와 주민  │
  │        등록번호를 입력하라는 회원은 발견 즉시 신고합시다. (go SINGO)   │
  └────────────────────────────────────┘

이제 잘 나오네요 ^^</textarea>

실행 가능한 소스

네오둥근모 2배 크기 폰트로 보기 (32px로 설정)

정확히 두배, 32px 인 모습

폰트 크기가 가로 세로 16px 이므로 32px로 설정시 뭉개짐 없이 2배 확대가 됩니다.

CSS

@font-face {
  font-family:'vtfont';
  src:url('//tistory4.daumcdn.net/tistory/214191/skin/images/NeoDunggeunmo.ttf') format('truetype');
  font-style:normal;
  font-weight:normal;
}
.bluescreen{
	width:1300px;
	height:600px;
	font-family:'vtfont', 굴림;
	font-size:32px !important; /* 32px 설정 */
	color:#fff !important;
	background:#0000A8 !important;
	line-height:32px !important; /* 32px 설정 */
	padding:30px !important;
	box-shadow:0 0 40px rgba(0,0,0,0.35) inset !important;
}

폰트 수정 하던 화면

fontforge 로 폰트수정

위 스크린샷에 있는 괘선문자 일부의 너비를 수정하였습니다.
수정은 생각보다 쉬웠고 필요한 부분만 수정하였습니다.
결과는 만족 ㅎㅎ

그리고 이 폰트는 아래 링크에 활용하였습니다.

안녕하세요!!

이 폰트를 제가 구상중인 프로젝트에 사용해보려고 하는데,
라이센스 문제는 없을까요?

제작하신 분께서 어떻게 라이센스를 하고 있는지에 따라 가능할지도 모르겠습니다.
한번 확인해 보시면 좋을것 같습니다. 사용처도 여러가지 경우가 있으니까요~
제가 약간 수정한 폰트는 원 제작자의 라이센스를 따르므로
혹시나 된다면 그냥 사용하셔도 될 것 같습니다. ^^*

픽셀 측정하는 저 버니어 캘리퍼스 모양은 따로 툴이 있는건가유??

"Screen Calipers" 라는 프로그램 입니다. 아주 오래전에 구한 구버전 사용중인데요.
구글에서 검색하니 아직 홈페이지가 있네요. 그리고 방문 감사드립니다. ^^*
※ 무료 프로그램은 아닙니다.

댓글 쓰기

이름 : 패스워드 :