Tên tài khoản:
Bạn đã có tài khoản rồi?
Tích vào đây để đăng ký.
Vâng, Mật khẩu của tôi là:

Bạn đã quên mật khẩu?

Duy trì trạng thái đăng nhập
Đăng nhập hoặc Đăng kí
Tin tức - News
Online [0]
.
V7 Min
Có 2 v7 nhá :v

Re: [ Hỏi ] Code chèn font vào css ntn ?

#1

Như tít , trc dùng css 4rum xviệt cũ thì nó có font trông khá là đẹp , sau khi up css sang xtgem mất font lun , chẳng bít add ntn o.o ?
TRUYỆNVUIVL.CƠM TruyenVUIVL.COM
VL nhỉ

#2

Nói rõ hơn
Đừng Hỏi Tại Sao Đừng Hỏi Tại Sao
không có wap

#3

đã hiểu chờ lát :D
1 :
Đừng Hỏi Tại Sao Đừng Hỏi Tại Sao
không có wap

#4

Bước 1

Chọn font cần load từ google

Đầu tiên bạn chọn loại font cần load từ google bằng cách vào địa chỉ webfonts google tại đây có nhiều font để bạn có thể chọn lựa

Bước 2

Sau khi đã chèn đường dẫn của font vào website, bạn sử dụng các selector hoặc tạo các class, id để định dạng cho đoạn văn bản như cách thông thường.

Chú ý: Với cách lấy và chèn link như trên bạn chỉ sử dụng được một font duy nhất, để có thể sử dụng được nhiều font khác bạn sử dụng ký tự | để phân cách các font

chắc xviet dùng cái này chứ không nàm trong css bạn nhé :D
TRUYỆNVUIVL.CƠM TruyenVUIVL.COM
VL nhỉ

#5

Đừng Hỏi Tại Sao (11.08.2015 / 16:30)
Bước 1

Chọn font cần load từ google

Đầu tiên bạn chọn loại font cần load từ google bằng cách vào địa chỉ webfonts google tại đây có nhiều font để bạn
Hình như bạn hiểu sai y của Top roi ! Y ban ay ns là lam sao chèn fon chữ vào css mà chac là như the này
-chèn font color này vào 1 thẻ dạng css là sẽ ra màu của font dung ko top nhỉ ? :D
-color:#5ebd84;
Đừng Hỏi Tại Sao Đừng Hỏi Tại Sao
không có wap

#6

TRUYỆNVUIVL.CƠM (11.08.2015 / 16:37)
Hình như bạn hiểu sai y của Top roi ! Y ban ay ns là lam sao chèn fon chữ vào css mà chac là như the này
-chèn font color này vào 1 thẻ dạng css là sẽ ra màu của font dung ko top
thì bạn ấy nói khi import css về xtgem thì font chữ kia biến mất nên tớ nghĩ thế còn về chèn vào css thì đây
Code
1, Các thuộc tính của font

+ Thuộc tính font-family:

- Font-family là thuộc tính quy định kiểu font dùng để hiển thị một thành phần hay một phần tử nào đó của html ( VD: quy định văn bản hiển thị bằng font "Georgia", các thẻ <h1> đến <h6> hiển thị bằng font "Arial" ...).

- Để xác định thuộc tính này cho các phần tử của html, ta có cách viết sau:

font-family:<Tên các font hoặc các họ font>;

- Các font cách nhau bằng dấu phẩy và nếu trong tên font chứa dấu cách, tên font phải được viết bên trong dấu nháy kép ( VD: "Times New Roman"...).

Tại sao ở đây lại nói là "các font" và "họ font" - thì mình xin giải thích qua như sau:

- Giá trị mà thuộc tính font-family nhận có thể là nhiều font khác nhau và mức độ ưu tiên sử dụng cuar trình duyệt giảm dần. Nghĩa là, font nào viết đầu tiên sẽ được trình duyệt sử dụng nếu trình duyệt không được hỗ trợ font đó thì trình duyệt sẽ sử dụng font tiếp theo để hiển thị.

- Họ font là tên font bao gốm nhiều loại font khác nhau (vd: VNI...), khi viết bạn chỉ cần viết tên họ font thì trình duyệt sẽ hiểu tên đó đại diện cho tất cả các loại font có họ đó.

- VD: body{font-family:Georgia, "Times New Roman", Arial, VNI;}

+ Thuộc tính font-size

- Là thuộc tính quy định cỡ chữ hiển thị một thành phần hay một phần tử nào đó trong một trang web.

- Cú pháp: font-size:<Kích cỡ chữ>;

- Kích cỡ chữ ở đây có thể là độ lớn của các đơn vị đo kích thước thông dụng, nhưng hầu hết người ta dùng đơn vị pixed.

- Kích cỡ chữ của các thành phần còn có thể xác định qua cỡ chữ được quy định trong thành phần body của trang, bằng cách sau:

body{font-size:15px;}

h1{font-size: 3em;}

h3{font-size:1,5em;}

- Ở đây ta đã quy định rằng: size chữ của phần tử h1 gấp 3 lần và của phần tử h3 gấp 1,5 lần size chữ dùng trong phần body của trang.

- Ngoài ra, ta còn một số size đặc biệt sau:
Size smaller
Size xx-small
Size x-small
Size small
Size medium
Size large
Size x-large
Size xx-large





+ Thuộc tính font-style:

- Thuộc tính quy định kiểu chữ hiển thị trong một thành phần của trang web là bình thường (Normal - Đây là giá trị mặc định) , in nghiêng ( Italic ) hay xiên ( Oblique ).

- Cú pháp: font-style:" Kiểu chữ ";

- VD: <p style="font-style:Italic"> Chữ in nghiêng </p>

- Kết quả: Chữ in nghiêng

+ Thuộc tính font-variant:

- Đây là thuộc tính biến chữ bình thường thành một dạng chữ in hoa, nhưng dạng chữ in hoa này bé hơn chữ in hoa chuẩn.

- Cú pháp: font-variant:small-caps;

- VD:

<ul>

<li>CHỮ IN HOA THƯỜNG</li>

<li style="font-variant:small-caps;">CHỮ IN HOA DÙNG FONT-VARIANT</li>

<li style="font-variant:small-caps;">Chữ thường dùng font-variant</li>

</ul>

- Kết quả:
•CHỮ IN HOA THƯỜNG
•CHỮ IN HOA DÙNG FONT-VARIANT
•Chữ thường dùng font-variant

- Ta có thể thấy rõ, thuộc tính font-variant chỉ có tác dụng với chữ thường

+ Thuộc tính font-weight:

- Thuộc tính này quy định kiểu hiển thị in đậm ( bold )hay không ( normal- đây là giá trị mặc định ) của chữ trong một thành phần của trang web.

- Cú pháp: font-weight: bold;

- Ví dụ: <p style="font-weight:bold"> Chữ in đậm</p>

- Kết quả:

Chữ in đậm

2, Thuộc tính của font rút gọn

Khi bạn xác định các thuộc tính này cho các phần tử của html, nhiều khi các bạn sẽ thấy nhàm chán khi cứ phải lạch cạch viết lại các từ giống nhau. Để khắc phục điều này, CSS hỗ trợ cách viết rút gọn cho các thuộc tính thay vì phải viết một cách đầy đủ cú pháp các thuộc tính ra mà vẫn cho hiệu quả tương tự.

- Với các thuộc tính của font, các bạn có thể viết rút gọn các giá trị mỗi thuộc tính theo thứ tự sau:

font:<font-style> <font-variant> <font-weight> <font-size> <font-family>;

- Nếu bạn không muốn định dạng thuộc tính nào, bạn không viết thuộc tính ấy, và thuộc tính ấy sẽ nhận giá trị mặc định.

-VD: < font: Italic 15px Georgia;> ... </font>

Ở đây, ta đã bỏ trống thuộc tính font-variant và font-weight vì vậy chúng sẽ nhận giá trị mặc định là: font-variant:norma; font-weight:normal;

Ở bài sau,mình sẽ tiếp tục giới thiệu cho các bạn cách định dạng một số thuộc tính của text.
:D
Đừng Hỏi Tại Sao Đừng Hỏi Tại Sao
không có wap

#7

bạn cứ quy nó về 1 class rồi sau chỉ viết thẻ class đó ra là sẽ có font ấy nha
V7 Min
Có 2 v7 nhá :v

#8

Thanks mấy bác , đang thấm o.o
TRUYỆNVUIVL.CƠM TruyenVUIVL.COM
VL nhỉ

#9

Mù css :D
V7 Min
Có 2 v7 nhá :v

#10

Như trên :v
V7 Min
Có 2 v7 nhá :v

#11

Đừng Hỏi Tại Sao (11.08.2015 / 16:42)
bạn cứ quy nó về 1 class rồi sau chỉ viết thẻ class đó ra là sẽ có font ấy nha
Giúp mình 1 thể dc ko , mình mún toàn bộ wap chạy font 4rum xviệt hiện giờ thì code cụ thể là gì o.o ? Mù css qúa
Đừng Hỏi Tại Sao Đừng Hỏi Tại Sao
không có wap

#12

import cái css xviet về soi class rồi chiển thôi. muốn biết rõ hơn bạn mở css ra xem nhé.
Đừng Hỏi Tại Sao Đừng Hỏi Tại Sao
không có wap

#13

V7 (11.08.2015 / 17:08)
Giúp mình 1 thể dc ko , mình mún toàn bộ wap chạy font 4rum xviệt hiện giờ thì code cụ thể là gì o.o ? Mù css qúa
đây css của forum xv [code]body{margin:0;padding:0;font-family: Helvetica, Tahoma, Arial, sans-serif;font-size:13px}
a, a:active {
color: #1752a6;
text-decoration: none;
}

a:hover {
color: red;
}
html{background:#ecece9;
background:url('http://xusotinhyeu.hexat.com/backgrounds/img/52.gif');
background-width: auto;
background-height: auto;background-position : top center;
background-attachment : fixed;
}
body {
margin:0px auto;
max-width:650px;
background:#ffffff;
box-shadow:0 0 6px 0 rgba(0,0,0,.25);
border-left:4px solid #ffffff;
border-right:4px solid #ffffff;}
trongtin {

text-shadow: 1px 1px 0 #ffcc00 , 2px 2px 0 #ff9900 , 3px 3px 0 #ff6600 , 3px 3px 0 #ff3300 , 2px 2px #ff0000 , 1px 1px 0 red }
.phpcode {
background-color: #e0e6e9;
border: 1px dotted #9faebb;
margin-top: 4px;
padding: 0 2px 0 2px;
max-height: 500px;
overflow: auto;
}
img{border:none;max-width:100%;height: auto!important;}
a.pagenav {
padding: 3px 6px;
background: #ffffff;
color: #000000;
margin: 0px;
display: inline-block;
border-radius: 4px 4px 4px 4px;
border:1px solid #d5d5d5;
}
a.pagenav:hover, .currentpage {
padding: 3px 6px;
background-color: rgb(58, 135, 173);
color: rgb(255, 255, 255);
margin: 0px;
display: inline-block;
border-radius: 4px 4px 4px 4px;
}
.bbcode_quote {
margin: 5px;
padding: 5px;
border-left: 5px solid #FCE27C;
background: #fff6d4;
}
.topx
{
padding: 2px;
margin: auto;
border-left: 1px solid rgb(0, 153, 255);
border-right: 1px solid rgb(0, 153, 255);
border-bottom: 1px solid rgb(0, 153, 255);
color: rgb(65, 115, 148);
font-size:1.1em;



}
.topx a{ color: rgb(65, 115, 148);
font-size:1.1em;}
.bodywrap {
width: 95%;
background-color: rgb(255, 255, 255);
margin: 0px auto auto;
padding: 0px 4px 4px;
border-right: 1px solid rgb(214, 214, 207);
border-width: 0px 1px 1px;
border-style: none solid solid;
border-color: -moz-use-text-color rgb(214, 214, 207) rgb(214, 214, 207);
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
}
.header{font-size: 13px;
font-weight:normal;
padding:13px 0 17px 0;
color:#ffffff;
text-align:center;
background-attachment: scroll;
background-color: rgb(216, 216, 216);
background-position: 0 -56px;
border-bottom: 4px solid rgb(68, 170, 51);
margin-top: 2px;
padding:2px;
}

#mheader {text-align:center;
height: 36px;
background-color: rgb(216, 216, 216);
border-bottom: 4px solid rgb(68, 170, 51);
margin-top: 2px;padding:2px;font-size:1.5em;
}
.notice1 {
padding: 4px;
border: 1px solid rgb(255, 211, 36);
margin-top: 4px;
background: none repeat scroll 0% 0% rgb(255, 255, 204);
color: rgb(81, 71, 33);
text-align: center;
}
#mheader a { font-weight:bold;font-size:2em;color:rgb(0,0,0);margin:3px;text-align:center; text-decoration: none; }

#mcontent { padding:0px; }
h1 { font-size:14px; font-weight:bold; }
h1 a:link, a:visited { color:#474849; }

.mnav { background-color: rgb(0, 153, 255);
color: rgb(255, 255, 255);
padding: 4px;
text-decoration: none;
text-align: center;display:none;}
.windowbg {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
font-size: 14px;
padding: 4px;
margin-left: auto;
margin-right: auto;
border-left: 1px solid rgb(0, 153, 255);
border-right: 1px solid rgb(0, 153, 255);
border-bottom: 1px solid rgb(0, 153, 255);
}
.mnav2 { background-color: rgb(0, 153, 255);
color: rgb(255, 255, 255);
padding: 4px;
text-decoration: none;
text-align: center; }

.mnav2 a {
color: rgb(255, 255, 255);
text-decoration: none;
padding: 2px;font-size:1.5em;
}
#mfooter { padding:10px;border-top:solid 1px #DEDEDE;color:#999999;font-size:11px; }
#mfooter a:link, #footer a:visited { color:#666666; }
#footer { padding-top: 5px; }

.mobileJump
{
display:block;
border:none;
width:70px;
}

.forumjumplink
{
float: left;
}

.mobilejumplink
{
position: absolute;
top: 8px;
left: 6px;
-webkit-border-radius: 0;
border-width: 0 5px 0 5px;
padding: 0;
height: 28px;
line-height: 28px;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
text-decoration: none;
background: none repeat scroll 0 0 transparent;
}

.mpostitle
{

background: none repeat scroll 0% 0% rgb(166, 229, 164);
color: rgb(0, 0, 0);
padding: 7px;
border: 1px solid rgb(0, 153, 255);
margin-top: 0px;
text-decoration: none;
font-size:1.2em;

}

.mpostitle a { color: rgb(65, 115, 148); font-size: 1.2em; }

.mavatar
{
height: 30px;
width: 30px;
float: left;border:1px solid black;
}

.redalerts1 {
color: #e03030;
font-size: 12px;
font-weight: bold;
white-space: nowrap;
word-wrap: normal;
}

.mobilearrow
{
background: transparent url('styles/default/xenforo/widgets/circle-arrow-down.png') no-repeat;
margin: 5px;
display: block;
float: left;
white-space: nowrap;
text-indent: 9999px;
overflow: hidden;
width: 13px;
height: 13px;
}

.mobilejump2
{
overflow: hidden;
width: 20px;
float: left;
height: 20px;
}
.mobilejump3
{
overflow: hidden;
width: 20px;
float: right;
height: 20px;
}

.mitemCount {
right: 2px;
top: -23px;
_width: 12px;
padding: 1px 3px;
text-align: center;
background: #ff0000;
color: white;
text-shadow: none;
font-size: 10px;
font-weight: bold;
white-space: nowrap;
word-wrap: normal;
-webkit-border-radius: 2px; -moz-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0, 0.25); -moz-box-shadow: 2px 2px 5px rgba(0,0,0, 0.25); -khtml-box-shadow: 2px 2px 5px rgba(0,0,0, 0.25); box-shadow: 2px 2px 5px rgba(0,0,0, 0.25);
}

.marrow
{

border: 3px solid transparent;
border-top-color: #ff0000;
border-bottom: none;
position: absolute;
bottom: -3px;
right: 4px;
line-height: 0px;
width: 0px;
height: 0px;
text-shadow: none;
/* Hide from IE6 */
_display: none;
}

.xenOverlay.chooserOverlay { width: 95% !important; }

.accountSideBar { display: block !important; width: 100% !important; }
.accountContent { display: block !important; }
.conversation_view .message .newIndicator { margin-right: 0xp !important; }
.helpSideBar { display: block !important; width: 100% !important; }
.helpContent { display: block !important; }
.xenOverlay.memberCard { width: 320px !important; }
.xenOverlay.memberCard .avatarCropper { top: 25px !important; left: 25px !important; }

.xenOverlay.memberCard .userInfo
{
top: 25px !important;
left: 120px !important;
width: 235px !important;
}

.xenOverlay.memberCard .userInfo .userTitleBlurb {margin: 0px !important;}
.xenOverlay
{
width: 90% !important;
margin: auto !important;
}

.profilePage .mast { width: 100% !important; float: none !important; }
.profilePage .main { margin-left: 0px !important; }
#ProfilePanes { margin-top: 25px; }
.profilePage .tabs li { width: 50%; }
.profilePage .tabs.mainTabs li a { width: 50%; }
.profilePage .mast .avatarScaler { text-align: center; }
.message .newIndicator { margin-right: 0px !important; }

.nodemobilesub
{
border-bottom: 1px solid rgb(206, 206, 206);
margin-left: 40px;
padding: 5px;
}

.discussionListItem .title { float: none !important; }
a.callToAction { float: right; }
.PageNav { float: left; margin-top: 5px; }
.nodemobilesub img { padding-left: 5px; padding-right: 7px; padding-top: 7px; }
.nodemobilesub h4 { padding: 5px; }
.xenForm .ctrlUnit dd { width:90% !important; }
.xenForm .ctrlUnit dt { text-align: left !important;padding-bottom:2px; }
.mainContent { margin-right: 0px !important; }
.breadcrumb .jumpMenuTrigger { display: none; }
.PageNav { float: none !important; }
.xenForm.personalDetailsForm .StatusEditor { width: 100%; }
.messageList .avatar img, .avatar .img, .avatarCropper { border: none; }
.discussionList .stats { display: none !important; }
.discussionList .lastPost {
1 2 »

1 :
V7 Min
Có 2 v7 nhá :v

#14

Thanks bác nhé , sau 1 lúc edit lại thì wap thành tem 4rum xviet mứi :v
ʚïɞ Nhóc Min ʚïɞ ஜ۩۞۩ஜ MIN ஜ۩۞۩ஜ
~~> VuiSố1.GQ

#15

TRUYỆNVUIVL.CƠM (11.08.2015 / 16:53)
Mù css :D
Sao lại mù , css là tự làm thì nó ms vừa ý mình chú , wap tôi tổng hợp hơn 13 css chế thành 2
  Tổng số: 15
Xem chủ để ngoại tuyến (Offline)
Xviet.Mobi
loading...
Trang chủ / 0 / 8 | Language: VN (Change)